SCSS使用基础

àì夳堔傛蜴生んèń 2022-05-05 10:28 496阅读 0赞

scss开发指南

  **SCSS (Sassy CSS) ）**是Sass的一种语法格式，它仅仅是在CSS3语法的基础上进行拓展，所有的CSS3语法在SCSS中都是通用的，同时加入了Sass的功能特色。SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

1.功能特色

  • 完美兼容CSS3
  • 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
  • 通过函数进行颜色值与属性值的运算
  • 通过函数进行颜色值与属性值的运算
  • 自定义输出格式

2.CSS功能拓展

2.1. 嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理：例如：

  1. #main p {
  2.   color:#00ff00;
  3.   width:100;
  4.   .redbox{ //此处代表的是 #main p .redbox
  5.      background-color:#ff0000;
  6.      color:red;
  7.   }
  8. }

2.2. 父选择器&

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

  1. a{
  2.   font-weight:bold;
  3.   text-decoration:none;
  4.   &:hover{ //代表的是 a:hover
  5.     text-decoration:underline;
  6.     body.firebox & { //代表的是body.firebox a
  7.       font-weight:normal; 
  8.     }
  9.   }
  10. }

此时的&代表的是父级的a元素

&作为选择器的第一个字符，后面可以跟随后缀生成复合的选择器。当父选择器含有不合适的后缀时，Sass 将会报错。

  1. #main {
  2.   color: black;
  3.   &-sidebar { border: 1px solid; } //代表的是 #main-sidebar
  4. }

2.3. 属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

  1. .funky {
  2.   font: {
  3.     family: fantasy; //css中 代表font-family
  4.     size: 30em;   //css中代表 font-size
  5.     weight: bold; //CSS中代表 font-weight
  6.   }
  7. }

命名空间也可以包含自己的属性值，例如：

  1. .funky {
  2.   font: 20px/24px { //表示为 font 20px/24px
  3.     family: fantasy;
  4.     weight: bold;
  5.   }
  6. }

2.4. 占位符选择器%foo

Sass 额外提供了一种特殊类型的选择器：占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似，只是#或 .替换成了 %。必须通过 @extend指令调用,单独的%foo是不会被编译成css文件的。

  1. %mt5 {
  2.   margin-top: 5px;
  3. }
  4. %pt5{
  5.   padding-top: 5px;
  6. }
  7. .btn {
  8.   @extend %mt5;//使用@extend调用占位符代码
  9.   @extend %pt5;
  10. }
  11. .block {
  12.   @extend %mt5;
  13.   span {
  14.     @extend %pt5;
  15.   }
  16. }

@extend可以让让一个选择器下的所有样式继承给另一个选择器。

  1. .error {
  2.   border: 1px #f00;
  3.   background-color: #fdd;
  4. }
  5. .seriousError {
  6.   @extend .error; //继承了.error的所有样式
  7.   border-width: 3px;
  8. }

2.5 注释/**/与//

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会，例如：

  1. /* This comment is
  2.  * several lines long.
  3.  * since it uses the CSS comment syntax,
  4.  * it will appear in the CSS output. */
  5. body { color: black; }
  7. // These comments are only one line long each.
  8. // They won't appear in the CSS output,
  9. // since they use the single-line comment syntax.
  10. a { color: green; }

编译后如下：

  1. /* This comment is
  2.  * several lines long.
  3.  * since it uses the CSS comment syntax,
  4.  * it will appear in the CSS output. */
  5. body {
  6.   color: black;
  7. }
  9. a {
  10.   color: green; 
  11. }

3 SassScript

在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能

3.1变量$

SassScript 最普遍的用法就是变量，变量以美元符号($)开头，赋值方法与 CSS 属性的写法一样：

  1. $width: 5em;
  2. //可以直接使用
  3. #main {
  4.   width: $width; //词句代表的是 width:5em
  5. }

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明：

  1. $height:100px; //全局变量
  2. #main {
  3.   $width: 5em !global; //升级为全局变量
  4.   width: $width;
  5. }
  7. #sidebar {
  8.   width: $width; 
  9. }

还可以设置默认变量，仅需在值后面加上!default即可。默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式是在默认变量之前重新声明下变量即可。默认变量的价值在进行组件化开发的时候会非常有用。

  1. $baseLineHeight: 2; //覆盖默认变量  如果此处为null将不会覆盖默认值的。
  2. $baseLineHeight: 1.5 !default;
  3. body {
  4.   line-height: $baseLineHeight;
  5. }

####3.2数据类型
SassScript 支持 6 种主要的数据类型：

  • 数字，1, 2, 13, 10px
  • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型，true, false
  • 空值，null
  • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或!important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

  • list

list数据可通过空格，逗号或小括号分隔多个值，可用 nth($var,$index)取值。关于list数据操作还有很多其他函数如 length($list)，join($list1,$list2,[$separator])， append($list,$value,[$separator])等，具体参考sass Functions。

  1. 定义：

    //一维数据
    $px: 5px 10px 20px 30px;

    //二维数据，相当于js中的二维数组
    $px: 5px 10px, 20px 30px;
    $px: (5px 10px) (20px 30px);

  2. 使用

    //sass style
    //———————————————-
    $linkColor:#08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
    a{
    color:nth($linkColor,1);

    &:hover{

    1. color:nth($linkColor,2);

    }
    }

    //css style
    //———————————————-
    a{
    color:#08c;
    }
    a:hover{
    color:#333;
    }

    • map

map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过 map-get($map,$key)取值。关于map数据还有很多其他函数如 map-merge($map1,$map2)， map-keys($map)， map-values($map)等，具体可参考sass Functions。

  1. 定义

    $heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

  2. 使用

    //sass style
    //———————————————-
    $headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
    each $header, $size in $headings {

    {$header} {

    1. font-size: $size;

    }
    }

    //css style
    //———————————————-
    h1 {
    font-size: 2em;
    }
    h2 {
    font-size: 1.5em;
    }
    h3 {
    font-size: 1.2em;
    }

3.3.运算

所有数据类型均支持相等运算 ==或!=，此外，每种数据类型也有其各自支持的运算方式。
#####3.3.1.数字运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。关系运算<, >, <=, >=也可用于数字运算，数字运算可以使用（）来影响优先级。相等运算==, !=可用于所有数据类型。

  1. p {
  2.   width: 1in + 8pt; //width :1.1111in; //
  3. }

注意: /运算具有特殊性，/在CSS中通常起到分割数字的用途，因此在scss中同样适用。不用类型的单位做加法/减法会报错。

以下三种情况/ 将被视为除法运算符号：

  1. 如果值，或值的一部分，是变量或者函数的返回值
  2. 如果值被圆括号包裹

  3. 如果值是算数表达式的一部分

    p {
    font: 10px/8px; //解释为css分割数字，不做除法
    $width: 1000px;
    width: $width/2; //符合第一种情况, 作为除法
    width: round(1.5)/2; // 使用函数,作为除法
    height: (500px/2); // 使用括号 作为除法
    margin-left: 5px + 8px/2px; //算术表达式,作为除法
    }

如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用#{} 插值语句将变量包裹。

  1. p {
  2.   $font-size: 12px;
  3.   $line-height: 30px;
  4.   font: #{$font-size}/#{$line-height}; //此处不作为除法，仅仅起分割作用
  5. }
3.3.2.颜色值运算

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值

  1. p {
  2.   color: #010203 + #040506; //分别计算01+04 02+05 03+06
  3. }

数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如:

  1. p {
  2.   color: #010203*2; //分别计算01*2 02*2 03*2
  3. }

需要注意的是，如果颜色值包含 alpha channel(透明度)（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

  1. p {
  2.   color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);//最后一个值必须相同
  3. }

颜色值的 alpha channel 可以通过 opacify 或transparentize 两个函数进行调整。

  1. $translucent-red: rgba(255, 0, 0, 0.5);
  2. p {
  3.   color: opacify($translucent-red, 0.3); //代表加 
  4.   background-color: transparentize($translucent-red, 0.25); //代表减
  5. }

编译后：

  1. p {
  2.   color: rgba(255, 0, 0, 0.8);
  3.   background-color: rgba(255, 0, 0, 0.25); 
  4. }

IE 滤镜要求所有的颜色值包含 alpha 层，而且格式必须固定#AABBCCDD，使用 ie_hex_str 函数可以很容易地将颜色转化为 IE 滤镜要求的格式。

  1. $translucent-red: rgba(255, 0, 0, 0.5);
  2. $green: #00ff00;
  3. div {
  4.   filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
  5. }

编译为:

  1. div {
  2.   filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
  3. }
3.3.3. 字符串运算

+可用于连接字符串 .注意，如果有引号字符串（位于+左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于+左侧）连接有引号字符串，运算结果则没有引号。

  1. p:before {
  2.   content: "Foo " + Bar;
  3.   font-family: sans- + "serif";
  4. }

编译后：

  1. p:before {
  2.   content: "Foo Bar"; //有引号
  3.   font-family: sans-serif;  //无引号
  4. }

在有引号的文本字符串中使用#{}插值语句可以添加动态的值：

  1. $value: null;
  2. p:before {
  3.   //"I ate 15 pies!"
  4.   content: "I ate #{5 + 10} pies!";
  5.   //  "I ate  pies!"  null被视作插入空字符串
  6.   content: "I ate #{$value} pies!";
  7. }
3.3.4. 布尔运算

SassScript 支持布尔型的and or 以及 not 运算。

3.3.5. 函数

SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：查看更多的函数。

  1. p {
  2.   color: hsl(0, 100%, 50%);
  3. }

编译为：

  1. p {
  2.   color: #ff0000; 
  3. }

还可以使用关键词参数,使用关键词参数，可以打乱参数的顺序。

  1. p {
  2.   color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
  3. }
3.3.6. 插值语句#{}

通过#{} 插值语句可以在选择器或属性名中使用变量：也可以在属性值中插入 SassScript

  1. $name: foo;
  2. $attr: border;
  3. p.#{$name} {
  4.   #{$attr}-color: blue;
  5. }

编译为：

  1. p.foo {
  2.   border-color: blue; 
  3. }

4. @-Rules 与指令

4.1.@import

Sass 拓展了 @import的功能，允许其导入SCSS 或 Sass还有css文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

  1. 文件拓展名是 .css；
  2. 文件名以http:// 开头；
  3. 文件名是url()；
  4. @import包含 media queries。

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为.scss或 .sass的文件并将其导入。

  1. //下面两者都是引入相同的文件
  2. import "foo.scss"; 
  3. import "foo"; //寻找foo.scss 或者foo.sass

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

  1. @import "rounded-corners", "text-shadow";

导入文件也可以使用#{} 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的url()导入方式：

  1. $family: unquote("Droid+Sans");
  2. @import url("http://fonts.googleapis.com/css?family=\#{$family}");
  4. //等同于---------------------------------------
  5. @import url("http://fonts.googleapis.com/css?family=Droid+Sans");

4.2.谐音

果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
将文件命名为 _colors.scss，便不会编译_colors.css文件。

  1. @import "colors";

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

4.3.嵌套@import

可以将@import嵌套进 CSS 样式或者 @media中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

  1. .example {
  2.   color: red;
  3. }
  4. //导入到 #main 样式内
  5. #main {
  6.   @import "example";
  7. }
  8. //--------------------编译为
  9. #main .example {
  10.   color: red;
  11. }

注意：不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import

4.4. @media

4.5.延伸复杂的选择器

Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器，比如.special.cool,a:hover 或者 a.user[href^="http://"] 等，例如：

同 class 元素一样，a:hover 的样式将继承给.hoverlink。

  1. .hoverlink {
  2.   @extend a:hover;
  3. }
  4. a:hover {
  5.   text-decoration: underline;
  6. }
  7. //-----------编译为
  8. a:hover, .hoverlink {
  9.   text-decoration: underline; 
  10. }

4.5.多重延伸

同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：

  1. .error {
  2.   border: 1px #f00;
  3.   background-color: #fdd;
  4. }
  5. .attention {
  6.   font-size: 3em;
  7.   background-color: #ff0;
  8. }
  9. .seriousError {
  10.   @extend .error;
  11.   @extend .attention;//此处可以这样定义 @extend .error,.attention；
  12.   border-width: 3px;
  13. }
  14. //--------编译为
  15. .error, .seriousError {
  16.   border: 1px #f00;
  17.   background-color: #fdd; 
  18. }
  20. .attention, .seriousError {
  21.   font-size: 3em;
  22.   background-color: #ff0; 
  23. }
  25. .seriousError {
  26.   border-width: 3px; 
  27. }

4.6.继续延伸

当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个，类似层叠继承。

  1. .error {
  2.   border: 1px #f00;
  3.   background-color: #fdd;
  4. }
  5. .seriousError {
  6.   @extend .error;
  7.   border-width: 3px;
  8. }
  9. .criticalError {
  10.   @extend .seriousError;
  11.   position: fixed;
  12.   top: 10%;
  13.   bottom: 10%;
  14.   left: 10%;
  15.   right: 10%;
  16. }
  17. //------编译后
  18. .error, .seriousError, .criticalError {
  19.   border: 1px #f00;
  20.   background-color: #fdd; 
  21. }
  23. .seriousError, .criticalError {
  24.   border-width: 3px; 
  25. }
  27. .criticalError {
  28.   position: fixed;
  29.   top: 10%;
  30.   bottom: 10%;
  31.   left: 10%;
  32.   right: 10%; 
  33. }

5 控制指令 (Control Directives)

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令(mixin)配合使用，尤其是用在Compass等样式库中。

5.1. @if

当@if的表达式返回值不是 false或者null 时，条件成立，输出{}内的代码。@if 声明后面可以跟多个@else if声明，或者一个@else 声明。如果 @if声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

  1. $type: monster;
  2. p {
  3.   @if $type == ocean {
  4.     color: blue;
  5.   } @else if $type == matador {
  6.     color: red;
  7.   } @else if $type == monster {
  8.     color: green;
  9.   } @else {
  10.     color: black;
  11.   }
  12. }
  13. //======编译为
  14. p {
  15.   color: green; 
  16. }

5.2. @for

@for指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于through 与to的含义：当使用 through 时，条件范围包含 <start>与<end> 的值，而使用 to时条件范围只包含 <start>的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

  1. @for $i from 1 through 3 {
  2.   .item-#{$i} { width: 2em * $i; }
  3. }
  4. //编译为
  5. .item-1 {
  6.   width: 2em; 
  7. }
  8. .item-2 {
  9.   width: 4em; 
  10. }
  11. .item-3 {
  12.   width: 6em; 
  13. }

5.3. @each

@each 指令的格式是 $var in <list>, $var可以是任何变量名，比如 $length或者$name，而 <list> 是一连串的值，也就是值列表。

@each 将变量$var 作用于值列表中的每一个项目，然后输出结果，例如：

  1. @each $animal in puma, sea-slug, egret, salamander {
  2.   .#{$animal}-icon {
  3.     background-image: url('/images/#{$animal}.png');
  4.   }
  5. }
  6. //======编译为
  7. .puma-icon {
  8.   background-image: url('/images/puma.png'); }
  9. .sea-slug-icon {
  10.   background-image: url('/images/sea-slug.png'); }
  11. .egret-icon {
  12.   background-image: url('/images/egret.png'); }
  13. .salamander-icon {
  14.   background-image: url('/images/salamander.png'); }
5.3.1.多重分配

@each指令也可以使用多个变量，如@each $ var1，$ var2，... in。 如果是列表中装有列表，则将子列表的每个元素分配给相应的变量。 例如：

  1. @each $animal, $color, $cursor in (puma, black, default),
  2.                                   (sea-slug, blue, pointer),
  3.                                   (egret, white, move) {
  4.   .#{$animal}-icon {
  5.     background-image: url('/images/#{$animal}.png');
  6.     border: 2px solid $color;
  7.     cursor: $cursor;
  8.   }
  9. }
  11. //-----编译后
  12. .puma-icon {
  13.   background-image: url('/images/puma.png');
  14.   border: 2px solid black;
  15.   cursor: default; 
  16. }
  17. .sea-slug-icon {
  18.   background-image: url('/images/sea-slug.png');
  19.   border: 2px solid blue;
  20.   cursor: pointer; 
  21. }
  22. .egret-icon {
  23.   background-image: url('/images/egret.png');
  24.   border: 2px solid white;
  25.   cursor: move; 
  26. }

map以键值对的形式存在，因此多重分配同样适用。

  1. @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  2.   #{$header} {
  3.     font-size: $size;
  4.   }
  5. }
  6. //======编译后
  7. h1 {
  8.   font-size: 2em; 
  9. }
  10. h2 {
  11.   font-size: 1.5em; 
  12. }
  13. h3 {
  14.   font-size: 1.2em; 
  15. }
5.4@while

@while指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for更复杂的循环，只是很少会用到。例如：

  1. $i: 6;
  2. @while $i > 0 {
  3.   .item-#{$i} { width: 2em * $i; }
  4.   $i: $i - 2;
  5. }
  6. //====编译后
  7. .item-6 {
  8.   width: 12em; 
  9. }
  11. .item-4 {
  12.   width: 8em; 
  13. }
  15. .item-2 {
  16.   width: 4em; 
  17. }
5.5支持三目运算

语法为： if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值。

  1. if(true, 1px, 2px) => 1px
  2. if(false, 1px, 2px) => 2px

6.混合指令

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
#####6.1. 定义混合指令@mixin
混合指令的用法是在@mixin后添加名称与样式，比如名为large-text 的混合通过下面的代码定义:

  1. @mixin large-text {
  2.   font: {
  3.     family: Arial;
  4.     size: 20px;
  5.     weight: bold;
  6.   }
  7.   color: #ff0000;
  8. }

混合也需要包含选择器和属性，甚至可以用 &引用父选择器：

  1. @mixin clearfix {
  2.   display: inline-block;
  3.   &:after {
  4.     content: ".";
  5.     display: block;
  6.     height: 0;
  7.     clear: both;
  8.     visibility: hidden;
  9.   }
  10.   * html & { 
  11.     height: 1px; 
  12.   }
  13. }
6.2. 引用混合样式@include

使用 @include 指令引用混合样式，格式是在其后添加混合名称，以及需要的参数（可选）

  1. .page-title {
  2.   @include large-text;
  3.   padding: 4px;
  4.   margin-top: 10px;
  5. }
  6. //===编译为
  7. .page-title {
  8.   font-family: Arial;
  9.   font-size: 20px;
  10.   font-weight: bold;
  11.   color: #ff0000;
  12.   padding: 4px;
  13.   margin-top: 10px; 
  14. }

混合样式中也可以包含其他混合样式，比如:

  1. @mixin compound {
  2.   @include highlighted-background;
  3.   @include header-text;
  4. }
  5. @mixin highlighted-background { 
  6.     background-color: #fc0; 
  7. }
  8. @mixin header-text { 
  9.   font-size: 20px; 
  10. }
6.3. 参数

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

  1. @mixin sexy-border($color, $width) {
  2.   border: {
  3.     color: $color;
  4.     width: $width;
  5.     style: dashed;
  6.   }
  7. }
  8. p { 
  9.   @include sexy-border(blue, 1in); 
  10. }
  11. //======编译为
  12. p {
  13.   border-color: blue;
  14.   border-width: 1in;
  15.   border-style: dashed; 
  16. }

混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值：

  1. @mixin sexy-border($color, $width: 1in) {
  2.   border: {
  3.     color: $color;
  4.     width: $width;
  5.     style: dashed;
  6.   }
  7. }
  8. p { 
  9.   @include sexy-border(blue); 
  10. }
  11. h1 { 
  12.   @include sexy-border(blue, 2in); 
  13. }
  14. //=======编译为
  15. p {
  16.   border-color: blue;
  17.   border-width: 1in;
  18.   border-style: dashed; 
  19. }
  20. h1 {
  21.   border-color: blue;
  22.   border-width: 2in;
  23.   border-style: dashed; 
  24. }

6.4.可变参数

有时，不能确定混合指令需要使用多少个参数，比如一个关于box-shadow 的混合指令不能确定有多少个'shadow' 会被用到。这时，可以使用参数变量…声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：

  1. @mixin box-shadow($shadows...) {
  2.   -moz-box-shadow: $shadows;
  3.   -webkit-box-shadow: $shadows;
  4.   box-shadow: $shadows;
  5. }
  6. .shadows {
  7.   @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
  8. }
  9. //====编译为
  10. .shadowed {
  11.   -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  12.   -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  13.   box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  14. }

可变参数也可以用在引用混合指令的时候 (@include)，与平时用法一样，将一串值列表中的值逐条作为参数引用：

  1. @mixin colors($text, $background, $border) {
  2.   color: $text;
  3.   background-color: $background;
  4.   border-color: $border;
  5. }
  6. $values: #ff0000, #00ff00, #0000ff;
  7. .primary {
  8.   @include colors($values...);
  9. }
  10. //====编译为
  11. .primary {
  12.   color: #ff0000;
  13.   background-color: #00ff00;
  14.   border-color: #0000ff;
  15. }
6.5.@content指令

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content标志的地方：

  1. @mixin apply-to-ie6-only {
  2.   * html {
  3.     @content;
  4.   }
  5. }
  6. @include apply-to-ie6-only {
  7.   #logo {
  8.     background-image: url(/logo.gif);
  9.   }
  10. }
  11. //====编译为
  12. * html #logo {
  13.   background-image: url(/logo.gif);
  14. }

为便于书写，@mixin可以用= 表示，而@include可以用+表示，所以上面的例子可以写成：

  1. =apply-to-ie6-only
  2.   * html
  3.     @content
  5. +apply-to-ie6-only
  6.   #logo
  7.     background-image: url(/logo.gif)

注意： 当@content 在指令中出现过多次或者出现在循环中时，额外的代码将被导入到每一个地方。

6.5.1.变量返回和内容块

传递给mixin的内容块将在块定义的范围内进行评估，而不是在mixin的范围内。 这意味着mixin中本地变量不能传入样式块中使用，并且变量将解析为全局变量。例如：

  1. $color: white;
  2. @mixin colors($color: blue) {
  3.   background-color: $color;
  4.   @content;
  5.   border-color: $color;
  6. }
  7. .colors {
  8.   @include colors { color: $color; } //由于存在预定义的值，此值将升级为全局值
  9. }
  10. //解析为：
  11. .colors {
  12.   background-color: blue;
  13.   color: white;
  14.   border-color: blue;
  15. }

7.函数指令（Function Directives）

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

  1. $grid-width: 40px;
  2. $gutter-width: 10px;
  4. @function grid-width($n) {
  5.   @return $n * $grid-width + ($n - 1) * $gutter-width;
  6. }
  9. #sidebar { width: grid-width(5); }
  10. //======>编译为
  11. #sidebar {
  12.   width: 240px; 
  13. }

发表评论

表情：
评论列表 （有 0 条评论，496人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue 使用scss

    一、概述 CSS 预处理器 SCSS是一种CSS预处理语言，定义了一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容

    一时失言乱红尘一时失言乱红尘/ 0 赞/ 319 阅读