Sass css扩展语言详解, 一看就会系列

Sass笔记

1. 使用方法

1. 安装环境

• window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装

• 下载ruby时需要下载自带Devkit的, 否则后期下载Sass会出错

• 安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量, 否则需要自己添加

  

2. 执行命令行

gem准备工作

// 查看ruby版本,确认其已经安装
gem -v

// 替换原来的gem源,改为中国镜像
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

//打印是否替换成功
gem sources -l
https://gems.ruby-china.com
# 确保只有 gems.ruby-china.com

sass安装

// 安装sass
gem install sass

// 安装成功后,查看版本
sass -v

编译解析sass文件为css

//单文件转换命令
sass input.scss output.css

//单文件监听命令
// .sacc/.scss文件后缀皆可使用sass语法
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

3. 插件

2. 变量

编译前

// 变量声明与使用
// 变量中间的分割可以使用中划线-和下划线_
$hightlight-color: #f90;
$basic-border: 1px solid black;

// 变量声明不止能在全局,也能在块作用域中使用
.nav {
  // 声明变量
  $width: 100px;
  // 使用变量
  width: $width;
  background-color: $hightlight-color;
  border: $basic-border;
}

编译后

.nav {
  width: 100px;
  background-color: #f90;
  border: 1px solid black;
}

3. 嵌套css规则

编译前

// 嵌套css规则
#content {
  width: 100px;
  height: 200px;
  background-color: orange;

  article {
    color: #f90;

    h1 {
      font-size: 20px;
    }

    p {
      font-size: 30px;
    }
  }
}

编译后

#content {
  width: 100px;
  height: 200px;
  background-color: orange;
}

#content article {
  color: #f90;
}

#content article h1 {
  font-size: 20px;
}

#content article p {
  font-size: 30px;
}

4. 父选择器&

编译前

// 父选择器&
:active a {
  color: #f90;

  &:hover {
    color: black;
  }
}

编译后

:active a {
  color: #f90;
}

:active a:hover {
  color: black;
}

5. 群组选择器的嵌套

编译前

// 群组选择器的嵌套
.con {
  h1,
  h2,
  h3 {
    font-weight: normal;
  }
}

.con1,
.con2 {
  h1 {
    color: aqua;
  }
}

编译后

.con h1,
.con h2,
.con h3 {
  font-weight: normal;
}

.con1 h1,
.con2 h1 {
  color: aqua;
}

6. 子代选择器

编译前

// 子选择器的嵌套
article {

  // 兄弟选择器
  ~p {
    font-size: 20px;
  }

  // 子代选择器
  >section {
    background-color: red;
  }

  nav+& {
    background-color: black;
  }
}

编译后

article~p {
  font-size: 20px;
}

article>section {
  background-color: red;
}

nav+article {
  background-color: black;
}

7. 嵌套属性

编译前

// 嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。就像css选择器嵌套一样，sass会把你的子属性一一解开，把根属性和子属性部分通过中划线-连接起来
nav {
  border: {
    style: solid;
    width: 1px;
    color: #000;
  }
}


// 对于属性的缩写形式
nav{
  border: 1px solid black {
    left: 0;
    right: 0;
  }
}

编译后

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}

nav {
  border: 1px solid black;
  border-left: 0;
  border-right: 0;
}

8. 导入.scss或.sass文件

// 导入.scss或.sass文件
// 可以把outer.sass文件中所有的样式都可导入当前样式表
@import "outer";

9. 默认变量值

编译前

// 默认变量值
// !default, 如果这个变量没有声明,则使用这个默认值,如果这个变量声明了,则使用声明的变量
// 这样的好处是,如果你需要引入别的.sass文件中的这个变量,他不会覆盖掉当前样式中与其同命名的变量
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

编译后

.fancybox {
  width: 400px;
}

##10. 嵌套导入

// 嵌套导入
// sass允许在@import命令写在css规则内
.blue-theme {
  // 在这里面包含了outer样式表中所有的样式
  // 这种嵌套导入只能导入scss文件,不能嵌套css文件
  @import "aside";
}

11. 原生css导入

// 原生css导入,可以不用url
@import "./side.css";

12. 注释

// 注释
// 静默注释,在解析为css时,该注释会被丢弃,不会解析在css中
/* 普通注释,这种注释会解析到css中,但如果出现在了不该出现的地方,也不会被解析 */

13. 混合

编译前

// 混合,如果你只需要反复使用一个值,那么一个变量就可解决,但如果需要反复使用一系列样式,就需要使用混合了
@mixin rounded-corners{
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.notice{
  // 使用混合
  @include rounded-corners;
}

编译后

.notice {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

14. 混合器传参

编译前

// 给混合器传参
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  // 使用混合器并传参
  @include link-colors(blue, red, green);
}

// 因为如果像上述方法一样的传参很难区分哪个参数什么意思,所以还提供$name:value的方式来传参
a{
  @include link-colors(
    // 顺序不重要,对应参数名写正确即可
    $normal: blue,
    $visited: green,
    $hover: red
  )
}

编译后

a {
  color: blue;
}

a:hover {
  color: red;
}

a:visited {
  color: green;
}

15. 选择器继承

编译前

// 选择器继承
//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  // seriousError会继承.error的所有样式
  @extend .error;
  border-width: 3px;
}

// .seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承
//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

编译后

.error,
.seriousError {
  border: 1px solid red;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

.error a,
.seriousError a {
  color: red;
  font-weight: 100;
}

h1.error,
h1.seriousError {
  font-size: 1.2rem;
}