其他分享
首页 > 其他分享> > sass变量,运算,插值及父选择器(二)

sass变量,运算,插值及父选择器(二)

作者:互联网

sass变量的声明:

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

变量的命名规则:

变量的数据类型:

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 */

效果:

image-20220322154748769

运算注意事项:

除法运算比较特殊:

在 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;
       }
}

标签:wd,变量,sass,color,及父,height,200px,选择器,size
来源: https://www.cnblogs.com/szsy/p/16171572.html