SASS基础笔记整理

轩陌

分类: SASS/SCSS 5230 2

SASS是CSS的预处理器(css preprocessor),CSS的一种开发工具,支持加减乘除运算、变量、嵌套、继承(继承上一个选择器)、mixin(代码重用)、颜色函数、插入文件、条件、循环语句、自定义函数。
sass有两种写法,一种是以.sass后缀的文件语法是没有大括号的,和stylus风格类似;一种是.scss为后缀的,我用的是scss,下边为scss语法

变量

scss变量以$开头


$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;
}
  • 29人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
SASS、SASS笔记

作者简介: 轩陌

打赏

生命的意义在于折腾,一直努力成长中,期待梦想实现的那刻。

共 2 条评论关于 “SASS基础笔记整理”

Loading...