scss基础用法教程

scss 和 sass 的区别

sass 和 scss 其实是一样的css预处理语言，scss 是 sass 3 引入新的语法，其后缀名是分别为 .sass 和 .scss 两种。 ​ sass 版本 3.0 之前的后缀名为 .sass ，而版本 3.0 之后的后缀名. scss

1、变量声明--$

$highlight-color: #F90;

2、变量引用

$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}
 
//编译后
 
.selected {
  border: 1px solid #F90;
}

 3、嵌套Css规则

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

4、父选择器的标识符&

由于嵌套规则的影响，伪类的写法需要加&

article a {
  color: blue;
  &:hover { color: red }
}
//编译后
article a { color: blue }
article a:hover { color: red }

5、群组选择器的嵌套

实现下面一行代码的Css写法。

.container h1, .container h2, .container h3 { margin-bottom: .8em }

sass写法：（第一种）

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

第二种群组选择器：

nav, aside {
  a {color: blue}
}

编译成css:

nav a, aside a {color: blue}

6、子组合选择器和同层组合选择器：>、+、~

>:命中第一个子元素

+：命中位于当前元素后的同级的第一个元素

~：命中位于当前元素后的所有同级元素

sass写法：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

7、嵌套属性

//sass
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
===>css
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

第二种写法：

//sass
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
===>css
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

8、导入sass文件

@import ‘sass文件名’