scss基本用法及详解及进行模块化开发

scss的基本用法：

1、基本功能（常用）

(1)、导入：@import，可单独导入，也可同时导入多个（文件可加后缀（允许scss和sass），也可不加（如果没有后缀，则会找到相同名字并且后缀即拓展名为.scss或者.sass的文件））

<1>、导入单个 @import "../colorTool/colors";

<1>、导入多个 @import "../variableTool/quantity", "../methodTool/func";

(2)、嵌套：

<1>、规则：嵌套时，内层样式将他的外层作为父级选择器，嵌套功能避免了重复输入父级元素，同时让复杂的scss结构变得利于管理。

<2>、元素嵌套：如果嵌套时给某个元素设置hover属性，及可用&来代替父级元素。这就是元素嵌套！

<3>、元素嵌套写法：.go-back{ cursor: pointer;font-size: 16px;.back-icon{vertical-align: sub; }&:hover{color: #2d8cf0;}} 执行编译后：.go-back{ cursor: pointer; font-size: 16px; } .go-back .back-icon{ vertical-align: sub; }

.go-back:hover{ color: #2d8cf0; }

<4>、属性嵌套：为了便于管理类似（font-weight，font-size）等类的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

<5>、属性嵌套写法：.accc{ font: { family: fantasy; size: 30em; weight: bold; } }。执行编译后.

accc {font-family: fantasy;font-size: 30em;font-weight: bold;}

(3)、注释：scss支持css的多行注释（/* */），也可以单行注释（//），多行注释编译为css会被打包到文件，单行注释则不会

(4)、占位：写法，与#（id）或者.(class)相似，他为%，但必须通过@extend去调用，当其单独使用时，不通过@extend调用时，则不会被编译进css中

2、功能用法：

(1)、变量（Variables）：写法（$）,赋值方法和css属性赋值写法一样

(2)、作用域：

<1>、（局部变量）变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用。.accc{ $width: 5em; width: $width } .btn{ width: $width }

<2>、（全局变量）不在嵌套规则内定义的变量则在任何地方都可以使用。$width: 5em; .accc{ width: $width }

<3>、（变量提升 !global）将布局变量提升为全局变量需要在其后面加!global。

.accc{ $width: 5em !global; width: $width } .btn{ width: $width }

<4>、（变量赋值!default）在变量结尾添加!default，给未通过default赋值的变量赋值，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值（$width: 5em; $width: 7em !default; .accc{ width: $width }）。当变量定义为null，则默认没被赋值（$width: null; $width: 7em !default; .accc{ width: $width }）

(2)、数据类型：

<1>、数字（1,2,3,40px）

<2>、字符串（有引号字符串与无引号字符串）

<3>、布尔（true，false）

<4>、空值（null）

<5>、数组（list）：用空格或者逗号隔开(h1, $h1, $line-height, $height)

<6>、对象（map）：和JavaScript的对象一样，写法（key：value）

3、指令及算法（控制指令，函数指令，混合指令）

(1)、控制指令

<1>、判断：写法（@if 或者 @if @else if）可跟随多个@else if；和js判断类似，例如：

$width: null; .accc{ @if $width == null { $width: 7em !global; } @else if $width != 1 { } width: $width; }

<2>、for循环，指令包含（@for $var from <开始位置> through <结束位置>或者@for $var from <开始位置> to<结束位置> ）区别在于through包含开始位置和结束位置，to只包含开始位置，不包含结束位置，开始位置和结束位置必须为整数值

@for $var from 1 through 3 { width: $var; }

<2>、each循环：写法（@each $var in <list>）$var会作用于列表中的每一项，变量也可多个；例如

$map: ( (h1, $h1, $line-height, $height) (h2, $h2, $line-height, $height) (h3, $h3, $line-height, $height) (h4, $h4, $line-height, $height) (h5, $h5, $line-height, $height) (h6, $h6, $line-height, $height) (p, $p, $line-height, $height) (div, $div, auto, auto) );

@each $header, $size, $line-height, $height in $map { #{$header} { font-size: $size; height: $height; line-height: $line-height; } }

(2)、函数指令（@function)：可以给函数传递若干全局变量作为参数，需要return（@return）

@function themed($theme-map, $key) { @return map-get($theme-map, $key); }

调用：@mixin background_color($color) { @include themeify { background: themed($theme-map, $color); } }

(3)、混合指令（@mixin）(引入混合指令@include)：避免多次书写重复样式。

<1>、mixin 可以为对象：@mixin themeify { @each $theme-name, $theme-map in $themes { //!global 把局部变量强升为全局变量 $theme-map: $theme-map !global; //判断html的data-theme的属性值 #{}是sass的插值表达式 //& sass嵌套里的父容器标识 @content是混合器插槽，像vue的slot &[data-theme="#{$theme-name}"]{ @content; } } };

<2>、mixin 可以为方法：@mixin background_color($color) { @include themeify { background: themed($theme-map, $color); } }

<3>、引入（@include）@include background_color('background-color')引入对象，传参；

@include themeify { background: themed($theme-map, $color); }引入对象；

上面我们把scss在项目中常用的东西说完了，接下来看一下，在项目中利用scss进行模块化开发。（按本人代码为例）以下代码实现系统换肤效果

1、目录划分：为了避免以后项目中更改代码麻烦，有利于开发，在这里我把scss文件夹划分为四个文件夹，分别是项目中使用的颜色文件夹（用来存放项目中所有的颜色，可放更多的颜色，定义不同的颜色变量就ok）、函数文件夹（这里存放项目中scss函数）、混合文件夹（这个文件存放项目中混合文件，避免项目中多余且无意的class，避免相同的内容多次手写）、变量文件夹（字面含义，存放所有变量，项目中不再使用样式，只引入变量）

颜色文件：该文件只定义颜色变量，项目中所有颜色都取这里的变量，项目中不去使用固定颜色，集中化管理颜色

scss基本用法及详解及进行模块化开发