sass基础

sass的环境配置

node.js和sass环境的配置

• 1：先下载node.js安装包进行安装
• 2：安装完成后，打开cmd命令窗口，输入node -v,或者 npm -v来检查是否安装成功
• 3：然后输入npm install sass -g安装sass环境(有的输入后安装不成功，那么需要先输入(npm config set registry registry.npm.taobao.org)命令
• 4：环境安装好以后输入sass --version检查一下版本
• 5：然后便可以使用了

将sass文件转换为css文件

//sass文件的创建后缀名要以.scss结尾
sass 文件名.scss 文件名.css

sass变量

//变量名要以$符号开始,具体使用方法如下：

$color:red;
div{
  color: $color;
}

sass作用域

$mycolor: red;
h1{
  $mycolor:green;
  color: $mycolor;
}

//转换后的css文件代码如下：
h1 {
  color: green;
}
//$mycolor(变量)选择与其最近的一个而被定义。

sass嵌套

#header{
  font-size: 19px;
  ul{
    li{
      background: rebeccapurple;
      a{
        &:hover{
          color: red;
        }
      }
    }
  }
}

//转换后的css文件代码如下：
#header {
  font-size: 19px;
}
#header ul li {
  background: rebeccapurple;
}
#header ul li a:hover {
  color: red;
}

sass导入

@import "./reset.scss";
div{
  color: red;
}


//reset文件代码
*{
  padding: 0;
  margin: 0;
}
a{
  text-decoration: none;
}
ul{
  list-style: none;
}

.left{
  float: left;
}
.right{
  float: right;
}
.clearfix{
  clear: both;
}


//导入后的结果
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clearfix {
  clear: both;
}

div {
  color: red;
}

sass混入

//定义：@mixin 变量名{}
//引入：@include 变量名
@mixin improtant {
  color: red;
  font-size: 5px;
}
div{
  @include improtant;
}

sass带参数的混入

@mixin border($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -o-border-radius: $radius;
}
#header {
  @include border(3px);
}

sass继承

//引用方法：@extend 类名
.button-basic{
  border: 1px solid red;
  padding: 10px;
}
.button-success{
  @extend .button-basic;
  color: green;
}
.button-error{
  @extend .button-basic;
  color: #e9232c;
}