SASS入门

最新推荐文章于 2022-12-26 17:02:02 发布

原创最新推荐文章于 2022-12-26 17:02:02 发布 · 468 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SASS #SCSS

Sass 专栏收录该内容

2 篇文章

订阅专栏

一、变量
　　sass可以定义变量，方便统一修改和维护。

//scss  style
$fontStack:    'Microsoft Yahei';
$primaryColor:　#333;

body{
    font-family:　$fontStack;
    color:   $primaryColor;
}

//解析为css
//css  style
body{
    font-family: 　'Microsoft Yahei';
    color:　 #333;
}

二、嵌套
　　sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

//sass style
nav{
    ul{
        margin:0;
        padding:0;
     }

     li{display:inline-block;}

     a{
        display:block;
        padding:6px 12px;
        text-decoration:none;
    }
}

//解析为css
//css style
  nav  ul{
        margin:0;
        padding:0;
     }

  nav  li{display:inline-block;}

  nav a{
        display:block;
        padding:6px 12px;
        text-decoration:none;
    }

三、导入
　　sass中如导入其他sass文件，最后会编译合并为一个css文件，优于纯css的@import

//sass style
//reset.scss

html,body{
    margin:0;
    padding:0;
}

//sass style
//base.scss

@import 'reset';

body{
    font-family:'Microsoft Yahei';
    background-color: #efefef;
}

//导入合并后解析为css
//css style

html,body{
    margin:0;
    padding:0;
}
body{
    font-family:'Microsoft Yahei';
    background-color: #efefef;
}

四、mixin
　　sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

//sass  style

@mixin box-sizing($sizing){
    -webkit-box-sizing: $sizing;
    -moz-box-sizing:$sizing;
    box-sizing:$sizing;
}

.box-border{
     border:1px solid #ccc;
     @include box-sizing(border-box);
}

//解析为css
//css  style
.box-border{
    border:1px solid #ccc;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

五、扩展/继承
　　sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

//sass style
.message{
    border:1px solid #ccc;
    padding:10px;
    color:#333;
}
.success{
    @extend .message;
    border-color:green;
}
.error{
    @extend .message;
    border-color:red;
}
.warning{
    @extend .message;
    border-color:yellow;
}

//解析为css
//css style
.message,.success,.error,.warning{
    border:1px solid #ccc;
    padding:10px;
    color:#333;
}
.success{
    border:1px solid green;
}
.error{
    border:1px solid red;
}
.warning{
    border:1px solid yellow;
}

六、运算
　　sass可进行简单的加减乘除运算等

// sass style
.container{width:100%;}
article[role='main']{
    float:left;
    width:600px / 960px * 100%;
}

article[role='complimentary']{
    float:right;
    width:300px / 960px * 100%;
}

//解析为css
//css  style
.container{width:100%;}
article[role='main']{
    float:left;
    width:62.5%;
}
article[role='complimentary']{
    float:right;
    width:31.25%;
}

七、颜色
　　sass中集成了大量的颜色函数，让变换颜色更加简单。

//sass  style
$linkColor:#08c;
a{
    text-decoration:none;
    color:$linkColor;
    &:hover{
        color:darken($linkColor,10%);
    }
}

//解析为css
//css  style
a{
    text-decoration:none;
    color:#0088cc;
}
a:hover{
    color:#006699;
}