sass快速上手-CSDN博客

一、sass简介

Sass其实是css预处理器的一种，另外还有less等。是在CSS的基础上，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性、复用性，可以让我们以更少的代码实现同样的效果，而且代码的整洁度可读性更强，更易实现css的模块化。更多介绍可以查看官网的中文文档

二、基本用法

1.变量

定义变量

//使用 $ 符号开头
$default-color:#f5f5f5;
复制代码

引用变量

//依然使用 $ 符号开头
.btn-default{
    background:$default-color;   
}

//编译后
.btn-default{
    background:#f5f5f5;   
}
复制代码

2.嵌套

选择器嵌套

例如我们实现一个导航栏，我们经常性遇到下面的代码

.navbar{
    background:#f5f5f5;
}
.navbar ul{
    list-style:none;
}
.navbar ul li{
    display:inline-block;
}
复制代码

一个navbar出现的三次，就不能只写一遍吗。可以，看代码

.navbar{
    background:#f5f5f5;
    ul{
        list-style:none;
        li{
            display:inline-block;
        }
    }
}
复制代码

这样简单明了，多好，少敲了多少次键盘。

父元素选择器&

//最简单的:hover
a{
    background:red;
}
a:hover{
    background:blue;
}
复制代码

又多敲了几下键盘。

a{
    background:red;
    &:hover{
    background:blue;
    }
}
复制代码

使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方。

群组选择器

   //常规css代码
    .container h1,
    .containet h2,
    .container h3{
        margin-left:10px;
    }
复制代码

    //sass代码
    .container{
        h1,
        h2,
        h3{
            margin-left:10px;
        }
    }
复制代码

属性嵌套

先看常规代码

.navbar{
    border-left:1px solid red;
    border-right:1px solid red;
    border-radius:2px;
}
复制代码

使用sass的属性的嵌套的写法

.navbar{
    border:{
        left:1px solid red;
        right:1px solid red;
        radius:2px;
    }
}
复制代码

3.混合mixin

sass中使用@mixin +名称声明一个混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的mixin通过@include +名称来使用。

无参数mixin

    //定义
    @mixin someName{
        border-top:1px solid red;
    }
    
    //调用
    .navbar{
        background:blue;
        @include someName;
    }
    
    //编译后的代码
    .navbar{
        background:blue;
        border-top:1px solid red;
    }
复制代码

有参数mixin

//定义
@mixin someName($num:1px,$color:red){
    border-top:$num solid $color;
}

//调用
.navbar{
    background:blue;
    @include someName(2px);//不指定的参数会使用默认值
}
//编译后的代码
.navbar{
    background:blue;
    border-top:2px solid red;//默认red
}
复制代码

为了保证浏览器兼容性，我们经常性会写下面的代码。

@mixin transition($transition){
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}
@mixin opacity($opacity) {
    opacity: $opacity;
    filter: alpha(opacity = $opacity * 100);
}

div {
    width: 100px; height: 100px;
    @include transition(all 0.5s);
    @include opacity(0.5);
}
section {
    width: 50px; height: 50px;
    @include transition(all 1s);
    @include opacity(1);    
}


//编译后
div {
  width: 100px;
  height: 100px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

section {
  width: 50px;
  height: 50px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  filter: alpha(opacity=100);
}
复制代码

4.继承extend

extend可以让一个class完全继承另一个class的所有样式。@extend +class名称来使用

.navbar{
    background:red;
     ul {
        list-style:none;
    }
}
.nav{
    border-top:1px solid blue;
    @extent .navbar
}
//编译后
.nav{
    border-top:1 px solid blue;
    background:red;
}
.nav ul{
    list-style:none;
}
复制代码

5.函数function

使用@function+函数名定义一个函数，直接使用函数名就可以调用

@function pxRem($px){
    $rem:37.5px;
    @return($px/$rem)+rem;
}
//调用
p{
    font-size:pxRem(14px);
}
//这是一个移动端适配的方法
复制代码

6.循环

@for

@for可以在限制的范围内重复输出格式。有两种使用方式：

@for $var from start through end:结束时包含end值

@for $var from start through end:结束时不包含

//实现一个栅格化css
@for $i from 1 through 10{
    .col-#{$i}{
        width:1rem * $i;
    }
}
//编译后
.col-1{
    width:1rem;
}
.col-2{
    width:2rem;
}
....
.col-10{
    width:10rem;
}
复制代码

@each

//实现一个1px边框
$border-poses:top,right,bottom,left;//定义一个一连串的值
@mixin border-1px($poses:$border-poses) {
    position: relative;
    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        @each $pos in $poses {
            border-#{$pos}: 1px solid red;
            #{$pos}: 0;
        }
    }
}
//编译后
border-1px{
    position:relative;
}
.border-1px::after{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    border-top:1px solid red;
    border-right:1px solid red;
    border-left:1px solid red;
    border-bottom:1px solid red;
}
//如果，我们在使用这个mixin时候，如果指定了了$pose的值，例如是top
//编译后代码
border-1px{
    position:relative;
}
.border-1px::after{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    border-top:1px solid red;//上边框
}
复制代码