# sass

Notes about sass&compass video: https://www.imooc.com/video/7063

# 变量

/*定义: */
$headline: Arial, Verdana, Helvetica, sans-serif;
/*使用: */
.main-sec {
  font-family: $headline;
}
1
2
3
4
5
6

# 局部文件

_variables.scss

宿主文件可以使用 @import 'variables' 引入局部文件;

# 父类选择器

a {
  &:hover {
    color: blue;
  }
}
1
2
3
4
5

# 属性嵌套

.main-sec {
  font: {
    family: $main-sec-ff;
    size: 16px;
  }
}
1
2
3
4
5
6

# 可重用代码块 mixin

@minx col($width: 50%) {
  width: $width;
  float: left;
}
/*调用方式: */
.webdemo {
  @include col(25%);
}
1
2
3
4
5
6
7
8

# 代码块继承

.anotherDemo{ @extend .webdemo; border: solid 1px #fff; }

  1. @extend 不能继承选择器序列;
  2. 使用%,用来构建只用来继承的选择器;
$webdemo {
  margin: 10px;
}
.anotherDemo {
  @extend $webdemo;
  border: solid 1px #fff;
}
1
2
3
4
5
6
7

# sass 中的@media

phone tablets medium devices large devices
<768px >=768px >=992px >=1200px
@mixin col-sm($width: 50%) {
  @media (min-width: 768px) {
    width: $width;
    float: left;
  }
}
1
2
3
4
5
6

css 渲染时是从右向左查找元素,因此应该给元素添加类名 @root 可以嵌套书写,顶层输出样式

# compass

# Normalize.css

浏览器样式重置

# How to use sass simply

  1. install ruby;
  2. install sass;
  3. sass --watch sourceDirectory:distDirectory --style outputStyle e.g.: sass --watch scss:css --style expanded
Last Updated: 2/8/2023, 2:30:06 AM