sass变量,运算,插值及父选择器（二）

sass变量的声明：

通过 $ 声明变量 ， $ 后边的就是变量的名字， 比如：$wd;声明变量后需要给变量赋值 ,比如 $wd:200px

变量的命名规则：

• 变量名都是自定义的

• 变量名可以使用字母，_ 作为开头，后边可以使字母，数字，_ , - 的组合，比如：$wd:100px $_ht:100px $width-html:29px $top1:20px

• 变量名区分大小写

变量的数据类型：

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

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

注意： 变量名是 中划线 还是 下划线

sass并不想强迫任何人一定使用中划线或下划线，所以这两种用法相互兼容。用中划线声明的变量可以使用下划线的方式引用，反之亦然。

scss示例：

SCSS

$wd:200px;
$ht:200px;
$top:top;
$line-height:200px;

.box{
    width: $wd;
    height: $ht;
    background-color: pink;
    line-height: $line-height;
    border-#{$top}:5px solid green ;
}

运算：

运算符：+ - * /

注： 乘除运算时单位也会进行运算。

​ 颜色也可以参与运算。

scss代码示例：

CSS

// 定义变量
$wd:200px;
$ht:200px;
$len:10;
$col:#123;
$ft:10px;
.box{
    width: $wd;
    height: $ht;
    background-color: #123+red;
    font-size: $ft + 20px;
    border: $wd / $len dotted rgb(24, 241, 151) - rgb(38, 117, 196);
    color: $col * 7;
    border-top: 10px  solid (#999 / #333);
}

转换css后：

CSS

.box {
  width: 200px;
  height: 200px;
  background-color: #ff2233;
  font-size: 30px;
  border: 20px dotted #007c00;
  color: #77eeff;
  border-top: 10px solid #030303;
}
/*# sourceMappingURL=04-sassoperation.css.map */

效果：

运算注意事项：

除法运算比较特殊：

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。

也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

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

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

SCSS

// 定义变量
$wd:200px;
$ht:200px;
$len:10;
$col:#123;
$ft:10px;
$size:300px;
.box{
    width: $wd;
    height: $ht;
    background-color: #123+red;
    /* 值被圆括号包裹*/
    font-size: (600px / 20);

    /* 值是变量或者函数的返回值*/
    font-size: $size / $len;

    /* 值是算数表达式一部分*/
    font-size: $size / 10;
}

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

SCSS

    // 使用变量同时，不做除法运算
    font-size: #{$size} / $ht;

插值：

语法： sass 的插值: #{变量名}，插值可以用于任何地方

sass示例：

SCSS

$left:left;
        $left2:100px;
        $cname:'.list';
        h1{
            height: 200px;
            //  属性的一部分
            margin-#{$left}:100px;
            border-#{$left}:10px solid red;   
            //  选择器的一部分
            strong#{$cname}{
                color:red;
            }
            //  值的一部分
            font:20px/#{$left2} '微软雅黑';
        }

父选择器：

语法：&

html结构：

HTML

 <div class="wrap">
         world 父选择器
         <div class="inner">hello</div>
     </div>

scss示例：

SCSS

.wrap{
       width: 300px;
       height: 300px;
       background-color: pink;
       .inner{
           width: 100px;
           height: 100px;
           background-color: green;
           &:hover{
               border:10px dotted skyblue;
           }
       }
       //  父选择器引用
       &:hover{
           color:red;
           font-size:30px;
       }
       &:hover .inner{
           background-color: orange;
       }
}