sass入门

一、sass的安装

MAC中：终端安装

1、gem sources —remove https://rubygems.org/

2、gem sources -a https://ruby.taobao.org/

     （如果你系统不支持https，请将淘宝更换成：gem sources -a http://gems.ruby-china.org）

3、gem install sass

     sass -v 

     如果提示版本信息，说明安装成功

二、sass入门

1、sass文件有两种后缀名：一种后缀名为sass，不用大括号和分号; 另一种是scss，这种和我们平常写的css文件差不多，需要大括号和分号。

一般建议使用scss的文件；避免sass再严格模式下报错

文件后缀名为sass的语法

$px:  12 px
body
  background:  #d0e9c6
  font-size:  $px

div
  width:  100 px
  height:  100 px

文件后缀名为scss的语法

body{
  font-size:  $px;
}
div{
  padding:  $pxs;
  line-height:  $baseLineHeight;
  margin:  $pxc;
}
p{
  padding:  nth( $pxd, 1);
}

三、sass文件的导入

sass导入是用@import规则导入；编译时@import导入的sass文件合并只生成一个css文件;如果导入的是普通的css文件，如：@import ’04.css’那导入的效果与普通的一样，不会合并到sass中，而是以@import url(04.css)方式存在

//01.scss

$px:  20 px;
$pxs:  12 px;
$baseLineHeight:  3;
$baseLineHeight:  1.5  !default;

$pxc:  5 px  10 px  20 px  30 px;
$pxd: ( 5 px  10 px) ( 20 px  30 px);

$linkColor:  #234 #752  !default;



body{
  font-size:  $px;
}
div{
  padding:  $pxs;
  line-height:  $baseLineHeight;
  margin:  $pxc;
}
p{
  padding:  nth( $pxd, 1);
}
a{
  color:  nth( $linkColor, 1);

  &: hover{
    color:  nth( $linkColor, 2);
  }
}

//03.scss

$px:  12 px
body
  background:  #d0e9c6
  font-size:  $px

div
  width:  100 px
  height:  100 px

//03.css

h2{
    font-size:  16 px;
}

@import  "01";
@import  "03";
@import  "04.css";

导入后生成的css

@import  url( 04.css);
body {
  font-size:  20 px; }

div {
  padding:  12 px;
  line-height:  3;
  margin:  5 px  10 px  20 px  30 px; }

p {
  padding:  5 px  10 px; }

a {
  color:  #234; }
  a: hover {
    color:  #752; }

body {
  background:  #d0e9c6;
  font-size:  12 px; }

div {
  width:  100 px;
  height:  100 px; }

四、变量

sass的变量必须以$开头，变量值（key）与属性值（value）需用冒号(:)分开；后面加上!default表示为默认值

$px:  20 px; //普通变量
$pxs:  12 px;
$baseLineHeight:  3; //覆盖默认变量
$baseLineHeight:  1.5  !default; //默认变量

$sp:  top  !default; //特殊变量,变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用

$pxc:  5 px  10 px  20 px  30 px; //多值变量,nth可以取到第几个值
$pxd: ( 5 px  10 px) ( 20 px  30 px); //二维数组

$headings: ( h1:  2 em,  h2:  1.5 em,  h3:  1.2 em); //map类型的变量,以key、value的形式

$linkColor:  #234 #752  !default;

body{
  font-size:  $px;
}
div{
  padding:  $pxs;
  line-height:  $baseLineHeight;
  margin:  $pxc;
}
p{
  padding:  nth( $pxd, 1);
}
//第一个值为默认值，第二个鼠标滑过值
a{
  color:  nth( $linkColor, 1);

  &: hover{
    color:  nth( $linkColor, 2);
  }
}

//应用class与属性
. border-#{ $sp}{
  border-#{ $sp}: $px;
}

@each  $header,  $size  in  $headings{
  #{ $header}{
    font-size:  $size;
  }
}

五、嵌套

sass的嵌套有两种方法：一种是选择器的嵌套；另一种是属性的嵌套；一般用的都是选择器嵌套。

选择器嵌套

选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用 &表示父元素选择器

. nav-top{
  line-height:  50 px;
  background-color:  #c0a16b;
  li{
    font-size:  14 px;
  }
  a{
    padding:  0 10 px;
    color:  #0a9dc7;
    &: hover{
      color: #c0a16b;
    }
  }
}

属性嵌套

属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

. border-sha{
  border: {
    style:  solid;
    left: {
      width: 10 px;
      color:  #0a9dc7;
    }
    right: {
      width:  20 px;
      color:  #0c60ee;
    }
  };
}