SASS常用语法

SASS常用语法

SASS在实际开发中起到了非常便捷的作用,并且简化了css中繁琐的选择器操作

1. 嵌套语法

2. 变量

3. 计算

4. 代码块 - - - @mixin

5. 函数 - - - @function

6. 继承 - - - @extend

7. 特殊变量 - - - list , 对象

8. 循环 - - - @for

9. 引入 - - - @import

1.嵌套语法

HTML结构

	<div id="box">
		<div class="d1">
			<p>
				<span>我在最里面</span>
			</p>
			<span></span>
		</div>
		
		<div class="d2"></div>
	</div>

如果想要取到最里层span又不影响外部结构样式,通常我们要写许多层选择器保证准确性,并且可能出现某个选择器不小心写错导致样式添加失败

SASS

#box{

	.d1{
	
		p{
		
			span{
				color:red;
			}
		}
	}	
}

css

#box .d1 p span {
  color: red;
}

利用sass嵌套语法可以准确获取到元素,并且在修改某个#box的后代元素时也可以对应找到他的样式域

例如这样

#box {
    height: 100px;
    width: 100px;

    .d1 {
        background: #99f;

        p {
            font: 12px/2 "";

            span {
                color: red;
            }
        }
    }
}

转换css后

#box {
  height: 100px;
  width: 100px;
}

#box .d1 {
  background: #99f;
}

#box .d1 p {
  font: 12px/2 "";
}

#box .d1 p span {
  color: red;
}

2.变量

变量的使用在重用率方面更加的方便

sass

// 单一变量
$color1: red;
// 复杂变量
$color2: #ff9 #99f;

.box1{
    background: $color1;
}

.box2{
	// nth从下标1开始,参数1 变量 ,参数2 下标
    background: nth($color2,1);
}

css

.box1 {
  background: red; }

.box2 {
  background: #ff9; }

3.计算

.box1{
    /* 加法 */
    height: 10px + 5px;     // 15px

    height: 10 + 5px;       // 15px

    height: 10px + 5;       // 15px
    /* 减法 */
    height: 10px - 5px;     // 5px

    height: 10px - 5;       // 5px

    height: 10 - 5px;       // 5px

    /* 乘法 */
    height: 10px * 2;       // 20px

    height: 10 * 2px;       // 20px

    // height: 10px * 2px;  报错,px无法和px相乘

    /* 除法 */
    // 因为css中有属性值需要/符号,例如 font: 12px/2 "";
    
    height: 10px / 2 ;      // 结果为 10px / 2

    // 所以需要计算的话需要加上括号或者乘以单位值
    height: (10px / 2);     // 5px

    // height: (10 / 2px); 报错 计算结果为 5/px ,不是一个值

    height: 10 / 2 * 1px;       // 5px

    height: 10px / 2px * 1px;     // 5px

}

4.代码块

减少样式代码的重复率,并且可以传值修改变量,但是没有返回值

/* 4.混合 ---> 代码块  */
// 没有返回值

// 用@mixin声明
@mixin trans ($deg){    // 像函数一样可以传值
    -webkit-transform: rotate($deg);
    -moz-transform: rotate($deg);
    -ms-transform: rotate($deg);
    -o-transform: rotate($deg);
    transform: rotate($deg);
}

// 调用时用@include
.box1{
    @include trans(90deg);
}
.box2{
    @include trans(45deg);
}

css

@charset "UTF-8";
/* 4.混合 ---> 代码块  */
.box1 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg); }

.box2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); }

5.函数

// 编写函数
@function pToR($px){
    @return $px/$fs * 1rem;
}

// 变量声明
$fs: 20px;
html{
    font-size: $fs;
}

.box2{
	// 函数调用
    height: pToR(100px);
}

css

html {
  font-size: 20px; }

.box2 {
  height: 5rem; }

6.继承

在重复样式上也可以用继承的方法,有区别的地方重新改写即可

/* 6.继承 */
.box1 {
    width: 100px;
    height: 100px;
    background: #99f;
}

.box2 {
	// 继承 .box1的样式
    @extend .box1;
    background: #f9f;
}

css

/* 6.继承 */
.box1, .box2 {
  width: 100px;
  height: 100px;
  background: #99f; }
.box2 {
  background: #f9f; }

7.特殊变量

其中包括list型变量和对象型变量

list

/* list变量 */
$list: (3 10px 20px)(4 20px 40px)(5 30px 60px);

// 遍历
// $a,$b,$c分别代表list中每个成员的(参数1 参数2 参数3)
@each $a,$b,$c in $list {
	// #{}表示占位符,返回#{}的值连接前面的字符 
    .box#{$a}{
        width: $b;
        height: $c;
    }
}

css

.box3 {
  width: 10px;
  height: 20px; }

.box4 {
  width: 20px;
  height: 40px; }

.box5 {
  width: 30px;
  height: 60px; }

对象

$map:(h1:10px,h2:20px,h3:30px);
@each $key,$val in $map{
    #{$key}{
        height:$val;
    }
}

css

h1 {
  height: 10px; }

h2 {
  height: 20px; }

h3 {
  height: 30px; }

8.循环

/* to 语法 不包括 最后一位5 */
@for $a from 1 to 5{
    .box#{$a}{
        height: 100px;   
    }
}
/* through  包括5 */
@for $a from 1 through 5{
    .div#{$a}{
        height: 100px;   
    }
}

css

/* to 语法 不包括 最后一位5 */
.box1 {
  height: 100px; }

.box2 {
  height: 100px; }

.box3 {
  height: 100px; }

.box4 {
  height: 100px; }

/* through  包括5 */
.div1 {
  height: 100px; }

.div2 {
  height: 100px; }

.div3 {
  height: 100px; }

.div4 {
  height: 100px; }

.div5 {
  height: 100px; }

8.引入

需要被引入的a.scss

.box{
    height: 100px;
}

编写的scss中

.div{
    color: red;
}
/* 以下是被引入的样式代码 */
@import "a.scss";

css

.div {
  color: red; }

/* 以下是被引入的样式代码 */
.box {
  height: 100px; }