SASS特性学习笔记

Hermes
27 阅读4分钟

SASS

css预处理器，本质上是将sass文件经过处理转换为css文件

SASS和SCSS区别

本质上是一样的只是版本不同，第三代后一样

SASS和LESS、stylus联系

使用到的编译器不同SASS是基于Ruby进行编译的

语法

1. 嵌套写法

.box{
  .item1{
  }
  .item2{
  }
}

2. 简写

// 选择器简写
.box{
  &:hover{}
  &-inner{}
}
// 属性简写
.box{
  font: {
    size: 12px;
    weight: 400;
  }
}

3. 占位符选择器% 使用时如果没有@extend引入时不会编译出来

.btn%default{
  width: 120px;
  height: 20px;
}
.btn-success{
  @extend %default;
  background: green;
}
.btn-error{
  @extend %default;
  background: red;
}
// 编译结果
.btn.btn-error,
.btn.btn-success {
  width: 120px;
  height: 20px;
}
.btn-success {
  background: green;
}
.btn-error {
  background: red;
}

4. scss变量

// css3中变量
// 使用 -- 声明变量 使用时用var()
:root{
  --color-base: #fff;
}
body{
  color: var(--color-base);
}

// scss变量
$color-base: #fff;
$color_base: #000; // 不区分下划线和连字符 两个变量后面的会覆盖前面的
body{
  color: $color-base;
}
4.1. 变量类型
// 数值类型
$font-size: 12px;
$count: 1;
// 字符串
$name: 'scss';
// 颜色
$color1: #fff;
$color2: rgba(0,0,0,0);
// 布尔
$flag: true;
// 数组
$list: 12 'foo' #fff;
// 空值
$number: null;
// maps
$thems: (dark: #000, light: #fff);
@use 'sass:map';
body{
  color: map-get($thems, light);
  color: map.get($thems, light); // 高版本中使用这种方式 首先引入map的namespace 使用map.get
}
4.2. 变量修饰符
$color: #fff !global; // 将这个变量作用域设置为全局
$color: #fff !default; // 如果这个变量已经定义使用定义的值 未定义使用这个值

5. 引入文件

// css3引入方式
@import url(color.css);
// scss引入方式
@import 'colors.scss';

// 以下情况会当作css引入
// 1. 类型是css
@import 'index.css';
// 2. 文件开头是http://
@import 'http://baidu.com/index.css';
// 3. 文件通过url()引入
@import url(index.scss);
// 4. 包含媒体查询
@import 'landscape' screen and (orientation:landscape);

6. mixin混入

// 可以将部分代码复制粘贴到引入的地方
@mixin base {
  width: 120px;
  height: 20px;
  &:hover{
    background: #eee;
  }
}
// 带参数使用 参数可设置默认值
@mixin line-height($line-height:10px) {
  line-height: $line-height;
}
.btn-default{
  @include line-height(20px);
}
// 数组不定参数 支持展开
@mixin linearGradient($colors...){
  background: linear-gradient(to top, $colors);
}
.btn {
  @include linearGradient(red, orange, yellow, white)
}

7. extend继承

 .alert{
   width: 100%;
   height: 30px;
   border-radius: 6px;
 }

 .alert-success{
   @extend .alert;
   background: green;
 }
 .alert-warning{
   @extend .alert;
   background: yellow;
 }
 // 编译后
 .alert-success, .alert-warning {
   width: 100%;
   height: 30px;
   border-radius: 6px;
 }

 .alert-success {
   background: green;
 }

 .alert-warning {
   background: yellow;
 }

8. 逻辑/关系运算符

运算符含义
==相等
大于
<小于
>=大于等于
<=小于等于
and且
or或
not非
$theme: light;
body{
  @if $theme == dark {
    background: #000;
  }
  @else {
    background: #fff;
  }
}

9. 数学运算符

body{
  width: 10 + 20;       /* 30 */
  width: 10px + 20px;   /* 30px */
  width: 10 + 20px;     /* 30px */
  width: 10px + 20;     /* 30px */
  width: 10% + 20;      /* 30% */
  width: 10px + 20cm;   /* 765.90551px 转换为第一个单位 */
  width: 10px + 20%;    /* 报错 相对单位和绝对单位不能转换运算 */
  width: 10em + 20px;    /* 报错 相对单位和绝对单位不能转换运算 */
}

10. 插值语句

可以插入某些值不参与运算符计算

$font-size: 12px;
$line-height: 24px;
p{
  font: #{$font-size}/#{$line-height} 'sans-serif';
  // 直接写成 font: $font-size/$line-height 'sans-serif'; 编译后会变成 0.5
}

$btn-type: 'success';
btn.#{$btn-type}{
  background: green;
}

常见函数使用

1. 色彩函数

$base-color: #0f0;
.p0{
  color: lighten($base-color, 30%); // 变亮
}
.p1{
  color: darken($base-color, 30%); // 变暗
}

2. 字符串函数

p{
  content: quote(123);               // 增加引号     
  color: unquote("#fff");            // 去除引号
  z-index: str-length('123456789');  // 计算字符串长度
}

3. 数值函数

p{
  z-index: random();    // 0-1
  z-index: floor(4.8);
  z-index: ceil(4.8);
  z-index: max(1,5,2,8,0);
  z-index: abs(-9);
}

4. 列表函数

length append index nth

p{
  z-index: length(10px 20px 30px);
  padding: append(10px 20px, 50px);
  z-index: index(10 20 30, 20);  // 返回所在数组中的下标
  color: nth(red green blue, 2); // 下标从1开始
}

4. MAP函数

map-get map-merge map-keys map-values map-has-key

$light-map: (bg-color: #fff, color: #000);
$dark-map: (bg-color: #000, color: #fff, font-size: 16px);
$color-map: (
  light: $light-map,
  dark: $dark-map,
);
$theme: dark;

body{
  background: map-get(map-get($color-map, $theme), bg-color);
  color: map-get(map-get($color-map, $theme), color);
  font-size: map-get(
    map-merge($light-map, $dark-map),
    font-size
  );
  content: map-keys($dark-map);
  content: map-values($dark-map);
  content: map-has-key($light-map, font-size);
}

5. if三元表达式

if(if−condition,if-condition, true-condition, $false-condition)

$theme: light;
body{
  background: if($theme == dark,#000,#fff);
}

程序控制语句

1. if else分支控制

$theme: blue;
p {
  @if $theme == dark {
    color: #000;
  }
  @else if $theme == blue {
    color: blue;
  }
  @else {
    color: #fff;
  }
}

2. for循环

  • from to 左闭右开 [1,3)
  • from through 左闭右闭 [1,3]
.cart-box{
  @for $index from 1 to 4 {
    >span:nth-child(#{$index}) {
      padding-right: 20px * $index;
    }
  }
  @for $index from 1 through 4 {
    >span:nth-child(#{$index}) {
      padding-right: 20px * $index;
    }
  }
}

3. each遍历

可以实现对数组每个元素进行遍历访问

$color-list: red, green,blue;
@each $color in $color-list{
  $index: index($color-list, $color);
  div>span:nth-child(#{$index}) {
    color: $color;
  }
}

4. while循环

$count: 10;
@while $count > 0 {
  .p-#{$count}{
    width: 120px / $count;
  }
  $count: $count - 1;
}

5. 自定义function

  • function与mixin的区别
    1. function用于计算单纯的数值，得到一系列复杂操作后的数据，通过@return返回
    2. mixin适用于得到完整的css样式表，在样式表层面上进行复用
@function get-linear-gradient($direction, $colors...) {
  @return linear-gradient($direction, $colors);
}
p{
  background-image: get-linear-gradient(to top, red, blue, green);
}

@use和@import区别

  • @use会产生命名空间，按模块隔离，默认以文件名字作为模块的名字，使用时需要通过模块名字使用；

  • @use在引入时可以通过as指定模块名字

@use './common.scss' as common1;
@use './common.scss' as common2;
@use './common.scss' as *;
  • @import引入时会直接将内容复制过来，多次import会产生重复，@use不会重复
  • @use模块内部可以用—或_开头的变量定义内部私有变量，这些变量不会在外部被访问到
$-width: 10px;
  • @use模块内部可以通过!default定义默认值，在use时可通过with修改默认值
/* index.scss */
@use './common.scss' as common1 with($color: green);

/* common.scss */
$color: red !default;
avatar
文章
阅读
粉丝