Scss语法简述

前言

  scss作为sass的升级，兼容了css3的属性，今天我们就来讲解一下如何使用scss语法，关于scss如何编译等问题，这里不会多说，主要以语法为重。

基础语法

1. 声明变量， 使用变量。

// 例1
$baseFontSize: 20px;
header ~ p{
  font-size: $baseFontSize;
}

// 例2
$baseImgUrl: '../images/';
background: url($baseImgUrl + 'xxx.png');

2. Css规则嵌套

// 一般情况
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

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

3. 父选择器标识符

/* ------ 例1 -------- */

// 一般情况
article a {
  color: blue;
}
article a:hover { 
  color: red
}

//  Scss语法
article a {
  color: blue;
  &:hover { color: red }
}

/* ------ 例2 -------- */

//  一般情况
#content aside {color: red};
body.ie #content aside { color: green }

//  Scss语法
#content aside {
  color: red;
  body.ie & { color: green }
}

4.群组选择器嵌套

// 一般情况
.container h1, .container h2, .container h3 { margin-bottom: .8em }

// Scss语法
.container {
  h1, h2, h3 {margin-bottom: .8em}
}

5. 子选择器和同层组合选择器

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

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

6. 嵌套属性

/* ------ 例1 -------- */

// 一般情况
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

// Scss语法
nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}

/* ------ 例2 -------- */

// 一般情况
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

// Scss语法
nav {
  border: 1px solid #ccc {
    left: 0px;
    right: 0px;
  }
}

7. 默认变量值

/* ------ 例1 -------- */
$baseFontSize: 20px !default;
div{
  font-size: $baseFontSize; // 20px
}

/* ------ 例2 -------- */
$baseFontSize: 50px;
$baseFontSize: 20px !default;
div{
  font-size: $baseFontSize; // 50px
}

/* ------ 例3 -------- */
$baseFontSize: 20px !default;
$baseFontSize: 50px;
div{
  font-size: $baseFontSize; // 50px
}

8. 导入和嵌套导入scss文件

// 导入
@import "xxx";

// 嵌套导入
// ipt.scss 文件内容 background: #000;

.blue-theme {
  aside {
    @import "ipt.scss"; // 此处引入ipt样式文件
  }
}

// 渲染结果

.blue-theme {
  aside {
    background: #000;
  }
}

9. 什么情况会导致Scss把@import理解成css原生的@import？

1. 被导入文件的名字以.css结尾；
2. 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
3. 被导入文件的名字是CSS的url()值。

4. 那么如何解决无法引入css文件？
解答：将css后缀修改成scss后缀，因为scss完全支持css。

10. 静默注释

// css文件的注释都是/* xxx */这种方式来书写注释内容
// Scss文件在原有的基础上新增了 // 作为注释符号

例1：
body{
    padding: 0; // 12121212
    margin: 0; /* 123 */
}

编译成css后：
body {
  padding: 0;
  margin: 0;
  /* 123 */
}

区别：// 是静默注释，编译成css的时候不会出现在css文件中。

11: 混合器

// 文件中大量重复数据我们可以用变量来完成，但是如果有大段大段的内容时，我们的独立变量就没法完成这种功能了，那么我们就需要使用混合器了。
/* ------例1-------- */
@mixin borderRadius{ // 固定值
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* ------例2-------- */
@mixin borderRadius($br){ // 传参，但不设置默认值
    -webkit-border-radius: $br + px;
    -moz-border-radius: $br + px;
    border-radius: $br + px;
}

/* ------例3-------- */
@mixin borderRadius($br: 10){ // 传参，默认值为10px
    -webkit-border-radius: $br + px;
    -moz-border-radius: $br + px;
    border-radius: $br + px;
}

引用：@include
#container{
  @include borderRadius;
}

#container{
  @include borderRadius(5);
}

12. 样式继承

// 继承： @extend

#conatiner{
    width: 200px;
    height: 200px;
    background: skyblue;
}
#box{
    @extend #conatiner;
    background: pink;
}

结束语

  最终，Scss入门语法就这些了，对于最后我们讲解的@minix和@extend有时候很相似，那我们应该选择哪一个呢？答案是大家都大部分使用@minix多于@extend，如果喜欢使用@extend的小伙伴们，切记，如果当样式和选择器之间在某些方面比较亲密的时候，推荐使用@extend，其他时候，都推荐使用@minix，因为@minix更加的灵活！

说明

原创作品，禁止转载和伪原创，违者必究！