sass 实践

1. 变量拼接字符串

定义变量: $border:1px solid double
使用变量：border:$border
同样也可以区拼接classname

//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

#{$borderDirection}有点类似于es6的模板字符串 `${}`

2.嵌套

嵌套分为属性嵌套和选择器嵌套
选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器

a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }

属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：

//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
}

也可以将变量拼接字符串和选择器嵌套放在一起使用

$node-prefix:jikefaner
.#{$node-prefix} {
  &-title {//&代表父classname
     height: 10px;
   }
}

3. 列表函数

在公司的项目里发现了

$theme-list: null !default;
@function theme($key: 'default') {
  @return map-get($theme-list, $key);//从$theme-list集合里面拿到与$key匹配的value
}

全局搜索map-get，居然没有发现他的定义的地方，原来是sass内置的函数

button/src/index.scss 下面有这么一句话：

$theme-list: $theme-btn-colors;

$theme-btn-colors;从哪来的呢，再次全局搜索，发现在
theme.scss里面的一句话：

$theme-btn-colors: (
  default: #fff,
  default-hover: $theme-color-disabled,
  default-border: $theme-color-border,
  primary: $theme-color-primary,
  primary-hover: $theme-color-secondary,
  primary-font: #fff,
  danger: $theme-color-disabled,
  danger-hover: $theme-color-danger,
  danger-font: $theme-color-danger,
  danger-font-hover: #fff,
  disabled: $theme-color-disabled,
  disabled-font: $theme-color-border,
  link-secondary: $theme-color-font-secondary,
);

但是没发现$theme-btn-colors是怎么被使用的，没有发现theme.scss在其他scss文件里被import，最后全局搜索在webpack.config.js里面发现了

     {
        test: /\.scss|.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { minimize: true } },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: false,
                plugins: () => [autoprefixer({ browsers: ['last 2 Chrome versions'] })],
              },
            },
            { loader: 'resolve-url-loader', options: { keepQuery: true } },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: false,
                data: `@import './src/styles/theme.scss';`,//这句话很关键
              },
            },
          ],
        }),
      },

小结：就是函数使用了列表函数map-get，example最能说明问题：

map-get(("foo": 1, "bar": 2), "foo") => 1
map-get(("foo": 1, "bar": 2), "bar") => 2
map-get(("foo": 1, "bar": 2), "baz") => null

sass语法