5分钟SASS快速入门

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在<body>标签上添加一个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;
2、【一个模块下多个.scss】当通过@import把sass样式分散到多个文件时，你通常只想生成少数一个css文件

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以组合选择器的形式继承

更多资料请参考

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

5分钟SASS快速入门

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

变量

嵌套

@import

静默注释

混合器

继承(@extend)

comer

引用和评论

解决内存溢出问题

Ant Design（Antd）深入剖析：定制主题的实现与应用

Sass变量：如何使用变量提升CSS的可维护性