马克社区,马克吐温社区,马克java社区【项目实战】sass使用基础篇（上）,vue.js reactjs sass

【项目实战】sass使用基础篇（上）

Sass是一种CSS预处理语言。CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。

CSS预处理语言有Scss(Sass) 和Less、Postcss。
Scss和Sass

sass一开始用的是一种缩进式的语法格式

采用这种格式文件的后缀名是.sass

在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法
区别：

    后缀名不同 .sass和.scss
    语法不同，请看下面

新版：

/*新版本
多行文本注释*/

//新版本
//单行文本注释

@import "base";

@mixin alert{
   color:red;
   background:blue;
}

.alert-warning{
   @include alert;
}

ul{
   font-size:15px;
   li{
       list-style:none;
   }
}

老版本：

/*新版本
多行文本注释

//新版本
单行文本注释

@import "base"

=alert
   color:red
   background:blue

.alert-warning
   +alert

ul
   font-size:15px
   li
       list-style:none

变量
变量的意义

在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想要使用样式的时候使用变量了

这样的优点就是便于维护，更改方便
变量的使用

可以通过$来定义变量，在变量名字中可以使用-和_来作为连接，并且-和_是可以互通的，就是用起来一模一样。

变量的值可以是字符串、数字、颜色等等，在变量里还可以使用其他变量，使用的时候直接写变量名就好了

例如

$primary-color:#ff6600;
$primary-border:1px solid $primary_color;

div.box{
   background:$primary-color;
}

h1.page-header{
   border:$primary-border;
}

css写法—》

div.box {
background: #ff6600;
}

h1.page-header {
border: 1px solid #ff6600;
}

嵌套的使用

合理的使用嵌套语法，可以使我们编写代码更为快捷

假设我们想写这样的css：

.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}



在sass里我们可以这样写

.nav{
   height:100px;
   ul{
       margin:0;
       li {
           float:left;
           list-style:none;
           padding:5px;
       }
   }
}

大家会发现，写出来的代码父和子之间都有空格隔开，如果我们需要给a加上伪类的话我们这样写

.nav{
    height:100px;
    a{
        color:#fff;
        :hover{
            color:#ff6600;
        }
    }
}

在里面就会出现这样的情况

.nav a :hover {
color: #ff6600;
}



我们发现在a和:hover之间有了空格，这样是不好的，所以我们需要在写的时候在：hover之前把a加上，这样就需要用到在之类里引用父类选择器的方式，我们可以用&符号代替父类

例如：

.nav{
    height:100px;
    a{
        color:#fff;
        &:hover{
            color:#ff6600;
        }
    }
}

这样就好了，下面来个完整的代码：

.nav{
    height:100px;
    ul{
       margin:0;
       li{
           float:left;
           list-style:none;
           padding:5px;
       }
       a{
           display:block;
           color:#000;
           &:hover{
               color:#f60;
               background:red;
           }
       }
    }

    & &-text{
       font-size:15px;
    }
}

css写法-----》

.nav {
height: 100px;
}
.nav ul {
margin: 0;
}
.nav ul li {
float: left;
list-style: none;
padding: 5px;
}
.nav ul a {
display: block;
color: #000;
}
.nav ul a:hover {
color: #f60;
background: red;
}
.nav .nav-text {
font-size: 15px;
}

嵌套属性

我们可以把一些复合属性的子属性来嵌套编写，加快编写速度，例如

body{
   font:{
       family:Helvitica;
       size:15px;
       weight:bold;
   }
}
.nav{
   border:1px solid red{
       left:none;
       right:none;
   }
}

.page-next{
   transition:{
       property:all;
       delay:2s;
   }
}



css写法-----》

body {
font-family: Helvitica;
font-size: 15px;
font-weight: bold;
}

.nav {
border: 1px solid red;
border-left: none;
border-right: none;
}

.page-next {
transition-property: all;
transition-delay: 2s;
}



mixin 混合

    你可以把它想象成一个有名字的定义好的样式

每一个mixin都有自己的名字，类似于js里的函数定义方法如下

@mixin 名字(参数1，参数2...){
    ...
}



使用方法是在其他选择器css样式里通过@include引入，其实就相当于将mixin里的代码写入到这个选择器的css里，如下：

@mixin alert {
   color:#f60;
   background-color:#f60;
   a{
       color:pink;
   }
   &-a{
       color:red;
   }
}

.alert-warning{
   @include alert;
}


css写法-----》

.alert-warning {
color: #f60;
background-color: #f60;
}
.alert-warning a {
color: pink;
}
.alert-warning-a {
color: red;
}

刚才是没有参数的mixin，mixin也可以拥有参数，需要注意的是：

    形参的名字前要加$
    传参的时候只写值的话要按顺序传
    传参的时候不想按顺序的话需要加上形参名字

例如：

@mixin alert($color,$background) {
   color:$color;
   background-color:$background;
   a{
       color:darken($color,10%);//把颜色加深百分之十
   }
}

.alert-warning{
   @include alert(red,blue);
}

.alert-info{
   @include alert($background:red,$color:blue);
}



css写法------》

.alert-warning {
color: red;
background-color: blue;
}
.alert-warning a {
color: #cc0000;
}

.alert-info {
color: blue;
background-color: red;
}
.alert-info a {
color: #0000cc;
}

继承拓展 extend

如果我们有一个选择器想要拥有另一个选择所有的东西，不管是样式还是子元素等等，可以使用@extend来继承

大家需要注意的是，++b继承a的时候，a的子元素设置了样式，也会给b的子元素设置样式++，达到完全一样的情况，例如：

.alert {
   padding:5px;
}

.alert a {
   font:{
       weight:bold;
       size:15px;
   }
}

.alert-info {
   @extend .alert;
   backgournd:skyblue;
}

css写法----》

.alert, .alert-info {
padding: 5px;
}

.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}

.alert-info {
backgournd: skyblue;
}



partials

在以前咱们编写css的时候，一个css引入另一个css需要使用@import，其实这是不好的，会多发一次http请求，影响咱们站点的响应速度。

在sass里，咱们可以把小的sass文件分出去，叫做partials，在某个sass里通过@import ‘partials名’去引入，注意路径哟，这样的话就可以把partials里的代码引到咱们大的sass里一起编译

    需要注意的是 partials的文件名前要加_

_base.scss :

body{
   margin:0;
   padding:0;
}



style.scss :

@import "base";

.alert {
   padding:5px;
}

.alert a {
   font:{
       weight:bold;
       size:15px;
   }
}

.alert-info {
   @extend .alert;
   backgournd:skyblue;
}

css写法----------->

body {
margin: 0;
padding: 0;
}

.alert, .alert-info {
padding: 5px;
}

.alert a, .alert-info a {
font-weight: bold;
font-size: 15px;
}

.alert-info {
backgournd: skyblue;
}

这样的话我们就可以把模块化的思想引入到sass里了
comment注释

sass里的注释有三种

    多行注释
    单行注释
    强制注释

多行注释：压缩后不会出现在css里 /* */

单行注释: 不会出现在css里 //

强制注释：压缩后也会出现在css里 /*! */

    sass的基础使用方法就介绍到这里，文章持续更新，后续更新sass高阶用法，关注公众号第一时间阅读。

欢迎关注微信公众号:猴哥说前端

前端高级