css预编译语言Sass几个特性和快速入手

变量

多次被使用 ,$开头, - 相连

添加!default【默认值】 如：$color-border : #dce3f3!default;

改一处，全局改，如：Element的换肤 $--color-primary: #409EFF !default;

嵌套

借助css选择器的后代选择器， 父子选择器 空格拼接一起

使用场景： 修改一个元素及其子元素的样式 多个子元素样式修改，减少父选择器的指定

【父选择器标识符】 伪类、伪样式要用【直接替换，避免了父子选择器空格拼接】 父选择器前添加选择器

article a {  color: blue;  &:hover { color: red }}article a { color: blue }article a:hover { color: red }//当用户在使用IE浏览器时，你会通过JavaScript在标签上添加一个ie的类名#content aside {  color: red;  body.ie & { color: green }}

群组选择器： 大量减少css代码量

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

nav, aside {  a {color: blue}}nav a, aside a {color: blue}

嵌套属性

///把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性//部分写在这个{ }块中nav {  border-style: solid;  border-width: 1px;  border-color: #ccc;}nav {  border: {  style: solid;  width: 1px;  color: #ccc;  }}===================nav {  border: 1px solid #ccc;  border-left: 0px;  border-right: 0px;}//优nav {  border: 1px solid #ccc {  left: 0px;  right: 0px;  }}

@import

• 局部文件【_var.scss】使用场景

1、【 变量文件或公共文件】 当一些样式需要在多个页面甚至多个项目中使用时,不需要在编译时生成.css文件 ，只是做被导入用 借助_下划线 如： _var.scss 其文件中变量使用默认变量 如： $success-color: #fff00e !default;

media  _leftSource.scss  _main.scss  _rightAttr.scss  media.scss

• sass语法完全兼容css语法，可以对于不是很熟悉scss语法的同学可以通过，修改原始的.css文件为.scss文件进行直接导入
• 对外通过index.scss提供统一出口，内容外其余.scss文件有顺序的引入

静默注释

body {  color: #333; // 这种注释内容不会出现在生成的css文件中  padding: 0; /* 这种注释内容会出现在生成的css文件中 */}

混合器

使用场景： 一大段样式文件可以被多次使用时

@mixin 定义 @include 使用 sass嵌套语法在mixin块{}中全部支持 默认参数值

2.1 无参@mixin 名称 {  }@include 名称；2.2 带参数@mixin 名称($color, $hover){  }@include 名称(blue, red);//参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用@mixin link-colors(    $normal,    $hover: $normal,    $visited: $normal  ){  color: $normal;  &:hover { color: $hover; }  &:visited { color: $visited; }}//$hover和$visited也会被自动赋值为red@include link-colors(red) 

继承(@extend)

//通过选择器继承继承样式.error {  border: 1px solid red;  background-color: #fdd;}.seriousError {  @extend .error;  border-width: 3px;}//注意：选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式，.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承

如果你觉得此文对你有一定的帮助，可以点击下方的【赞】收藏备用