sass变量、嵌套、混合（mixin）、继承拓展、@import、comment(1/6)

本篇文章主要介绍了" sass变量、嵌套、混合（mixin）、继承拓展、@import、comment"，主要涉及到方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 变量、嵌套、混合（mixin）、继承拓展、@import、comment变量的意义在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想...

变量、嵌套、混合（mixin）、继承拓展、@import、comment

变量的意义

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

这样的优点就是便于维护，更改方便

变量的使用

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

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

例如

$primary-color:#ff6600;
$primary-border:1px solid $primary_color;div.box{background:$primary-color;}h1.page-header{border:$primary-border;}

---》

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

嵌套的使用

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

假设我们想写这样的css：

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

在sass里我们可以这样写