https://www.xuanmo.xin/1446.html

SASS基础笔记整理

发布于 分类: 前端自动化 2 1205

SASS是CSS的预处理器(css preprocessor),CSS的一种开发工具,支持加减乘除运算、变量、嵌套、继承(继承上一个选择器)、mixin(代码重用)、颜色函数、插入文件、条件、循环语句、自定义函数。

变量

SASS变量以$开头


$left : left;
div{
  float: $left;
}
/*编译结果*/
div{
  float: left;
}

/*变量需要嵌套在属性里须写在#{}里面*/
div{
  border-#{$left}-radius: 10px;
}

运算

SASS支持加减乘除运算
加法


div{
  width: 100 + 20px;
}
/*编译结果*/
div{
  width: 120px;
}

减法


div{
  width: 100 - 20px;
}
/*编译结果*/
div{
  width: 80px;
}

乘法


div{
  width: 100 * 2px;
}
/*编译结果*/
div{
  width: 200px;
}

除法


div{
  width: (200px / 3);
}
/*编译结果*/
div{
  width: 66.66667px;
}

混合运算


div{
  width: (200px / 3) + 20 - 3px * 2;
}
/*编译结果*/
div{
  width: 80.66667px;
}

嵌套

嵌套写法可以不用写很长的选择层级,可以在选择器里嵌套着写


div{
  width: 100px;
  height: 100px;
  a{
    color: #f00;
      i{
         font-size: 16px;
       }
  }
}
/*编译结果*/
div {
  width: 100px;
  height: 100px;
}
div a {
  color: #f00;
}
div a i {
  font-size: 16px;
}

属性嵌套方法,比如复合属性多个值也可以使用嵌套


div{
    border:{
        width: 1px;
        top:{
            width: 1px;
            style: solid;
            color: #f00;
        }
    }
}
/*编译结果*/
div {
  border-width: 1px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #f00;
}

在嵌套代码里面引用父元素可以使用&,比如div:hover


div{
    &:hover a{
        text-decoration: underline;
    }
}
/*编译结果*/
div:hover a {
  text-decoration: underline;
}

注释


SASS注释的写法分两种
// 此写法不会再编译的css文件中体现
/**/ css注释方法,会在编译后体现

继承

继承另一个选择器的代码,可以使用@extend命令


.class{
    border: 1px solid #f00;
}
.class1{
    @extend.class;
    font-size: 12px;
}
/*编译结果*/
.class, .class1 {
  border: 1px solid #f00;
}

.class1 {
  font-size: 12px;
}

mixin,重用代码块


@mixin left{
    float: left;
    width: 100px;
    height: 100px;
}
.class2{
    @include left;
}
/*编译结果*/
.class2 {
  float: left;
  width: 100px;
  height: 100px;
}

mixin还可以传参数


@mixin randomAttr( $attr , $value : 1s ){
    -webkit-#{$attr}: $value;
       -moz-#{$attr}: $value;
        -ms-#{$attr}: $value;
         -o-#{$attr}: $value;
            #{$attr}: $value;
}
div{
    @include randomAttr(animation);
}
/*编译结果*/
div {
  -webkit-animation: 1s;
  -moz-animation: 1s;
  -ms-animation: 1s;
  -o-animation: 1s;
  animation: 1s;
}

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

已经没有了!