Sass数据类型

Sublime ww9992019com 发表于 1 周前

<div style="width:100%;float:left;" class="article-content">

                <input type="hidden" name="article_id" id="article_id" value="8071">
                <input type="hidden" name="catid" id="catid" value="0">

                <div>

<div>

    数据类型是一个类型的信息,对于每一数据对象这需要声明数据类型。下表显示SassScript支持各种数据类型:

</div>

</div>

<p>

</p><table border="1" cellpadding="2" cellspacing="0">

    <tbody>

        <tr>

            <th>

                S.N.

            </th>

            <th>

                <div>

                    数据类型及说明

                </div>

            </th>

            <th>

                示例

            </th>

        </tr>

        <tr>

            <td>

                1

            </td>

            <td>

                <b>Numbers</b><br>

                <div>

                    它代表整数类型

                </div>

            </td>

            <td>

                2, 10.5

            </td>

        </tr>

        <tr>

            <td>

                2

            </td>

            <td>

                <b>Strings</b><br>

                <div>

                    单或双引号中定义的字符序列

                </div>

            </td>

            <td>

                'Yiibai', "yiibai"

            </td>

        </tr>

        <tr>

            <td>

                3

            </td>

            <td>

                <b>Colors</b><br>

                <div>

                    用于定义颜色值

                </div>

            </td>

            <td>

                red, #008000, rgb(25,255,204)

            </td>

        </tr>

        <tr>

            <td>

                4

            </td>

            <td>

                <b>Booleans</b><br>

                <div>

                    <span>布尔类型</span>返回true或false

                </div>

            </td>

            <td>

                10 &gt; 9 指示为 true

            </td>

        </tr>

        <tr>

            <td>

                5

            </td>

            <td>

                <b>Nulls</b><br>

                <div>

                    它指定为空值,未知的数据

                </div>

            </td>

            <td>

                if(val==null) {//statements}

            </td>

        </tr>

        <tr>

            <td>

                6

            </td>

            <td>

                <b>Space and Comm</b><br>

                <div>

                    表示由空格或逗号分隔值

                </div>

            </td>

            <td>

                1px solid #eeeeee, 0 0 0 1px

            </td>

        </tr>

        <tr>

            <td>

                7

            </td>

            <td>

                <b>Mapping</b><br>

                <div>

                    它从一个值<span>映射</span>到另一个值

                </div>

            </td>

            <td>

                FirsyKey: frstvalue, SecondKey: secvalue

            </td>

        </tr>

    </tbody>

</table>

<h2>

字符串

</h2>

<div>

字符串是一系列单或双引号字符。用单引号或双引号定义的字符串将通过使用#{}插补(选择使用变量的一种方式)被显示为不带引号的字符串值。

</div>

<h2>

示例

</h2>

<div>

下面的例子演示了在SCSS文件中使用字符串:

</div>

<pre>&lt;html&gt;

&lt;head&gt; <span lucida console monospace>&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;</span> &lt;title&gt;字符串 - www.yiibai.com&lt;/title&gt;

&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;

&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;

&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class="container"&gt;

&lt;h2&gt;字符串使用示例&lt;/h2&gt;

&lt;p class="yiibai"&gt;Sass is an extension of CSS that adds power and elegance to the basic language.&lt;/p&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;
</pre>

<p>

接下来,产生一个文件:style.scss.

</p>

<h3>

style.scss

</h3>

<pre>$name: "yiibai";

p.#{$name} {

color: blue;

}
</pre>

<div>

你可以告诉SASS监视文件,并随时使用下面的命令更新SASS文件修改CSS:

</div>

<pre>sass --watch <span lucida console monospace>C:\Ruby22-x64</span><span lucida console monospace>\style.scss:style.css</span></pre>

<div>

接着执行上面的命令,它会自动创建style.css文件,下面的代码:

</div>

<h4>

style.css

</h4>

<pre>p.yiibai{

color: blue;

}
</pre>

<h2>

输出结果

</h2>

<div>

让我们来执行以下步骤,看看上面的代码执行结果:

</div>

<ul>

<li>

    <div>

        保存上述的HTML代码到strings.html文件。

    </div>

</li>

<li>

    <div>

        在浏览器中打开该HTML文件,输出如下得到显示。

    </div>

</li>

</ul>

<p>

<img src="/uploads/tutorial/20151212/1-15121212093DI.png" alt="">

</p>

<h2>

Lists

</h2>

<div>

列表指定使用空格或逗号,甚至单个值分隔的多个值被视为一个列表。Sass使用了一些的列表的功能,如:

</div>

<ul>

<li>

    <p>

        nth 函数: 它提供了列表的特定的项目

    </p>

</li>

<li>

    <p>

        join 函数: 它将多个列表加入成为一个列表

    </p>

</li>

<li>

    <p>

        append 函数: 追加的项目到列表的另一端

    </p>

</li>

<li>

    <p>

        @each 指令: 它提供列表中每个项目的样式

    </p>

</li>

</ul>

<div>

例如,考虑有两种类型的列表;第一个列表包含了使用逗号分隔如下列值。

</div>

<pre>10px 11px, 15px 16px
</pre>

<div>

如果内部列表和外部列表拥有相同的分隔符,那么可以用括号来指定两份列表的开始和结束。可以指定列表如下图所示:

</div>

<pre>{10px 11px} {15px 16px}
</pre>

<h2>

Maps

</h2>

<div>

映射是那些键用来表示键和值的组合。映射定义值成组,并且可以被动态访问。映射表达式可以写为:

</div>

<pre>$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);
</pre>

<div>

它使用的一些功能,如:

</div>

<ul>

<li>

    <p>

        map-get: 提供映射的值。

    </p>

</li>

<li>

    <p>

        map-merge: 它增加值到映射中

    </p>

</li>

<li>

    <p>

        @each directive: 它规定了键/值对映射的样式

    </p>

</li>

</ul>

<div>

映射没有任何元素表示空键/值对 ( ) ,使用inspect($value)函数来显示输出映射。

</div>

<h2>

Colors

</h2>

<div>

它是用于定义SassScript颜色值。例如,如果正在使用颜色代码为#ffa500,那么它将会显示为橙色压缩模式。Sass提供类型在无效语法时,颜色插值到选择其它输出模式相同的输出格式。要克服这个问题,使用颜色名称在引号内。

</div>

<p>

<br>

</p>

                <br>
                <p style="text-align:center;float:left;width:100%;margin-top:24px;margin-bottom:18px;">
                        <button class="layui-btn layui-btn-danger" id="btn-reward"> ¥ 我要打赏 </button>  
                        <button class="layui-btn" id="article-perfect">
                            <i class="layui-icon layui-icon-edit"></i>教程纠错
                        </button>
                        <button class="layui-btn layui-btn-normal" id="action-collection">
                            <i class="layui-icon layui-icon-rate"></i>收藏
                        </button>
                </p>



                <div style="width:100%;margin-bottom: 16px; height: 32px;margin-top:18px;float:left;">

                    <span style="float:left;">上一篇:<a href="http://f2e.im/u/ww9992019com" title="Sass变量"><i class="layui-icon"></i>
                            Sass变量</a></span>
                                            <span style="float:right;">下一篇:<a href="http://f2e.im/u/ww9992019com" style="float:right;" title="下一篇:Sass数字运算符"><i class="layui-icon"></i>
                            Sass数字运算符</a></span>
                                            <div id="googlead" style="float:left;margin-top:8px;">
                        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                        <!-- yiibai下方 -->
                        <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-1090193214637198" data-ad-slot="6494738921"></ins>
                        <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});
                        </script>
                    </div>
                </div>

                <div style="width:100%;margin-top:18px;float:left;">


            </div>
暂无回复,说出你的观点吧
登录后即可参与回复