5分钟SASS快速入门

时间 2019-12-06

标签 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】使用场景

一、【变量文件或公共文件】当一些样式须要在多个页面甚至多个项目中使用时,不须要在编译时生成.css文件，只是作被导入用借助_下划线如： _var.scss 其文件中变量使用默认变量如： $success-color: #fff00e !default;
二、【一个模块下多个.scss】当经过@import把sass样式分散到多个文件时，你一般只想生成少数一个css文件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以组合选择器的形式继承

更多资料请参考浏览器

若是你以为此文对你有必定的帮助，能够点击下方的【赞】收藏备用