Sass&Scss入门 选择器 混合器 导入 条件判断 迭代

Sass

基于ruby的一种将脚本解析成CSS的脚本语言。也可以说是一种预处理语言。

Sass在css的语法基础上增加了变量、嵌套、混合、继承、导入等高级功能。

使用Sass与Sass样式库(如compass)有助于更好地管理样式文件，更高效开发项目。

sass不适用花括号和分号，不被广为接受

而scss作为sass3引用的新语法，兼容了CSS3的同时，继承了Sass的强大功能，比较优秀

Sass的安装与使用：

1 安装ruby依赖：以下任选其一

2 打开VScode终端安装sass

• gem install sass
• gem install compass(compass是一种sass样式库)

3 编写sass代码，在指定的目录下编译成css文件

$w:50px
div
    width: 50px
    height: 50px
    background-color: red

在指定目录下生成css文件：

格式：sass sassUrl  cssUrl

示例：sass  ./testSass/a.sass  ./testcss/a.css

4 在页面引入sass

其实是使用link标签引入sass生成的css文件

<link rel="stylesheet" href="../css/c.css">

5 效果

6 监听目录下sass变化并动态生成css文件到指定css目录

终端命令：

sass --watch  sass文件目录:css文件生成目录

示例：sass --watch ./testSass:./testCss

Scss

命令行：sass sccsPath  cssPath

例如：sass ./testScss/a.sccs  ./testcss/sa.css

标签选择器：

$_w:100px;
div{
    width: $_w;
    height: 100px;
    background: red;
}

类选择器：

.div1{
    width: $_w*3;
    height: $_w*4;
    background: purple;
}

&代表当前父标签，伪类选择器

$_w1: 100px;
div {
  width: $_w1;
  height: $_w1;
  background-color: aqua;
  // & is subClass : div
  &:hover{
      background-color: lightcoral;
  }
}

伪元素选择器：

$w_1:100px;
div{
    width: $_w;
    height: $_w;
    border: 1px solid #000;
    &::after{
        content: 'after element';
        display: block;
        width: $w_1;
        height: $w_1;
        background-color: aqua;
        position: absolute;
        left: 100px;
    }
}

后代选择器：

$w_1:100px;
div{
    span{
        display: block;
        position: absolute;
        left: 100px;
        background-color: pink;
    }
}

子代选择器：

$w_1:100px;
div{
    >span{
        display: block;
        position: absolute;
        left: 100px;
        background-color: pink;
    }
}

相邻兄弟选择器： 元素1 + 兄弟元素(选中此元素，是元素1的后方相邻元素)

+只能选中当前元素后方相邻元素，只能选一个

~也表示兄弟选择器，区别是~可以选择该元素后方所有的同级元素

二者都不能选择该元素1前面的兄弟元素

$w_1: 100px;
div {
  + span {
    display: block;
    position: absolute;
    left: $w_1;
    background-color: pink;
  }
}

相邻兄弟选择器：~  选择后方所有同级兄弟元素，只能是后方的

$w_1: 100px;
div {
  ~ span {
    display: block;
    position: absolute;
    left: $w_1;
    background-color: pink;
  }
}

div{
    &+.div1{
        background-color: yellow;
    }
}

选择元素的属性：

$_w :100px;
div{
    width: $_w;
    height: $_w;
    background-color: red;
    border: {
        left: {
            width: 10px;
            style:solid;
            color: pink;
        };
    };
}

导入：

@import "c";//导入同级目录下c.scss

混合器的使用：@maxin定义内容，@include在选择器里导入内容语句。如果是不同文件，在使用混合器之前，要将@maxin所在scss文件导入方可

注意：调用其他文件下的混合器，在include之前需要@import导入

@mixin setUL($_w,$_h){
  width: $_w+px;
  height: $_h+px;
  background-color: aqua;
}
ul{
    @include setUL(100,200);
}

混合器与条件判断if使用：

@mixin setP($_w:10,$_h:10){
    @if $_w<50{
        $_w:;
    }
    width:$_w+px;
    height: $_h+px;
    background: lightcoral;
}
p{
    @include setP(1,100)
}

混合器子代继承

@import selector;

p{
    >a{
        @extend p;
        display: block;
        position: relative;
        left: 100px;
        background-color: lightcyan;
    }
}

迭代器：

只包含start不包含end

for $var from start through(或者用to) end{

selector#{$var}{....}

}

@for $i from 1 through 6 {
    .elem#{$i}{
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: lightcyan;
    }
}