scss用法总览

文章目录

  • 一、scss概述
  • 二、安装Sass编译器
  • 三、SCSS语法细则
    • (一)、注释
    • (二)、数据类型
    • (三)、变量
    • (四)、占位符
    • (五)、嵌套
    • (六)、函数
    • (七)、插值
    • (八)、选择和循环结构
    • (九)、样式混入 @mixin 和 @include指令
    • (十)、@import指令
    • (十一)、@extend指令
  • 四、Bootstrap定制
  • 五、相关文档推荐


一、scss概述

1.动态样式语言:也称为预编译样式语言,指在CSS基础之上添加一些动态语言的特性,如变量、运算符、函数等,可以极大的提高样式代码的编写效率和可维护性。
2.当前主流动态样式语言有三种:
①Sass:最早诞生,功能最全面 —— Bootstrap4之后使用
②Stylus:功能强大,但是语法稍复杂
③Less:语法简单 —— Bootstrap3之前使用
注意:浏览器直接支持的样式语言只有原生的CSS,任何其它语法的样式代码都必须经过“翻译”转换为CSS才能被浏览器执行 —— 这个过程需要一款“编译器”软件
3. Sass:Syntactically Awesome Stylesheets,是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。
4. sass和scss的区别:
早期的(3.0之前)Sass称为Indented Sass(简称Sass),使用“缩进语法”,例如:使用“Tab”代替大括号,使用“换行”代替分号 —— 文件后缀名为 .sass
最新的(3.0之后)Sass称为Sassy CSS(简称SCSS),使用“标准CSS语法”,在此基础上添加新的特性 —— 文件后缀名为 .scss

scss用法总览_第1张图片scss用法总览_第2张图片


二、安装Sass编译器

HBuilderX市场中提供了一款Sass编译器插件,称为compile-node-sass,在线安装后即可使用

  1. 安装方法:
    点击HBuilderX菜单栏中的“工具”>“插件安装”>“安装新插件”>“前往插件市场安装”>搜索“scss”>点击插件“scss/sass编译”>“使用HBuilder导入插件”,安装完成后,重启HBuilderX即可使用。
  2. 使用方法:
    在后缀名为.scss的文件中右键单击,选择“外部命令”>“scss/sass编译”>“1编译scss/sass”

3.报错
如果出现如下错误,说明系统中当前版本的Node.js与插件不兼容,需要下载相关的补丁:
在这里插入图片描述
相关补丁可以到GitHub搜索并下载,保存到上述问题所要求的目录中即可
在这里插入图片描述
4.实现“保存即自动编译”功能
如果觉得每次修改完.scss都要右键单击编译太麻烦,可以修改complile-node-scss的配置文件,实现“保存即自动编译”功能:
右键单击.scss文件>“外部命令”>“scss/sass编译”>“插件配置”>弹出的package.json配置文件中修改第27行: “onDidSaveExecution”: true > 保存并重启HBuilderX即可。

三、SCSS语法细则

(一)、注释

标准CSS只能使用多行注释(/**/);
SCSS可以使用多行注释(/* */),也可以使用单行注释(//),前者会被编译到.css文件中,后者则不会。

(二)、数据类型

1.SCSS支持 7 种主要的数据类型:
① 数字:1, .2, 13, 50%, 10px, 2.5em
② 字符串:有引号字符串与无引号字符串,“黑体”, ‘…/img/1.jpg’, bold
③ 颜色:blue, #04a3f9, rgba(255,0,0,0.5)
④ 布尔型:true, false
⑤ 空值:null
⑥ 数组 (list):用空格或逗号作分隔符, 1.5em 1em 0 2em, Helvetica, Arial, sans-serif
⑦ maps: 相当于 JavaScript 的 object,(key1: value1, key2: value2)
2. SCSS支持如下的运算符:
① 算术运算: + - * / %
② 颜色运算: + - *
③ 字符串拼接: +
④ 逻辑运算: and or not
⑤ 调整运算顺序: ( )

p {
  font: 10px/8px;             
  $width: 1000px;
  width: $width/2;           
  width: round(1.5)/2;        
  height: (500px/2);          
  margin-left: 5px + 8px/2px; 
}


(三)、变量

变量以美元符号开头,赋值方法与 CSS 属性的写法一样:

$light-color: #f5f5f5;     //全局变量

body {
  $base-font: 14px;      //局部变量
  background-color: $light -color;
  border: 1px solid $light -color;
  font-size: $base-font;
}

可以使用 !default 为未经赋值的变量赋值(如果变量已经赋过值了,就不再赋值),从而保证变量不会被重复赋值:

$bg-color: #fff;
$bg-color: #eee;
$bg-color: #ddd !default;
$txt-color: #333 !default;

body {
  background-color: $bg-color;              //将编译为:#eee
  color: $txt-color;                           //将编译为:#333
}

(四)、占位符

不同于变量,占位符可以预先写一些样式,只有在调用的时候才会生效

%mr5 {
   margin-right:5px;
}
.header {
   @extend %mr5;	
}
=>
/*
.header {
   margin-right:5px;
}
*/

(五)、嵌套

1.Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:

.f1 {
  width: 97%;

  .box {
    color: #000000;
  }
}

将被编译为这样的CSS代码:

.f1 {
  width: 97%;  
}

.f1  .box {
    color: #000000;  
}

2.属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如:

.box {
  font: {
    family: "黑体";
    size: 1.1em;
    weight: bold;
  }
}

被编译为:

.box {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

(六)、函数

SCSS中允许自定义函数:

@function  add( $c1, $c2 ){
    @return  $c1 + $c2
}

也提供了非常多的预定义函数:点这里


(七)、插值

通过 #{} 插值语句可以在选择器或属性名中使用变量:

$name: box;
$attr: border;

p.#{$name} {
  #{$attr}-color: blue;
  animation-name: "my-#{name}-anim";
}

(八)、选择和循环结构

与JavaScript等语言类似,SCSS中也有选择和循环结构:

$enable-border: true;

.box {
  @if  $enable-border  {
      border: 1px solid #aaa;
  }
  color: #333;
}
@for  $i   in  1  to  6 {
  .item#{$i} {
     font-size: 12px + $i * 2;
  }
}

(九)、样式混入 @mixin 和 @include指令

目的:样式复用
1.基本使用:
①.@mixin指令用于定义可重复使用的样式,但是不会引入不必要的class;
②.可以在后续的代码中使用@include指令引用之前定义的混合样式:
例如:

@mixin  bordered {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
}

.btn {
  @include bordered;
  background-color: #eee;
}
.box {
  @include bordered;
  color: #333;
}

将编译为:

.btn {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
  background-color: #eee;
}
.box {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
  color: #333;
}

2.在使用混合指令时,还可以设定变量(形参),在后续引用时为这些变量提供实际数据(实参):

@mixin  bordered($bw, $bc, $space: 5px) {
  border: $bw solid $bc;
  padding: $space;
  margin: $space;
}

.btn {
  @include bordered(1px, #aaa, 6px);
  background-color: #eee;
}
.box {
  @include bordered(2px, #bbb);
  color: #333;
}

将被编译为:

.btn {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
  background-color: #eee;
}
.box {
  border: 1px solid #aaa;
  padding: 5px;
  margin: 5px;
  color: #333;
}

(十)、@import指令

CSS中也可以使用@import,用于在一个CSS文件中导入其它CSS文件 —— 属于客户端导入,即客户端浏览器还是需要发起两个HTTP请求,分别获取两个CSS文件。
SCSS中的@import指令属于服务器端导入,即在服务器端使用Node.js完成多个SCSS的合并编译为一个完整的CSS文件;客户端并不知道这个文件中的内容来自多个SCSS文件。
注意:如果希望监视编译目录的SCSS编译器不单独编译某个.scss文件,只需要将此文件名以下划线开头即可;导入此文件时,可以添加也可以省略下划线。

//假设当前目录下存在 _base.scss,则下面三条语句是等价的:
@import  "_base.scss";
@import  "base.scss";
@import  "base"

大多数情况下,一般在文件的最外层(不在嵌套规则内)使用 @import,其实,也可以将 @import 嵌套进 CSS 样式,如下例:

//_box.scss
.box {
  color: red;
}
//main.scss
.f2 {
   @import  "box"
}

将被编译为:

.f2  .box {
     color: red;
}

(十一)、@extend指令

一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。SCSS中可以使用 @extend 指令实现:

.btn {
  border:1px solid #aaa;
}
.btn-danger {
  @extend  .btn;
  background-color: #fcc;
}

将被编译为:

.btn, .btn-danger {
  border: 1px solid #aaa;
}

.btn-danger {
  background-color: #fcc;
}

四、Bootstrap定制

Bootstrap5的CSS文件(bootstrap.css)是编译后的结果,其源代码是用SCSS编写的,所以官方推荐如果需要修改或定制Bootstrap,不要直接修改bootstrap.css文件,而是应该修改其SCSS源文件。

五、相关文档推荐

单文件编译可以在下面的网站进行操作,多文件编译见下下节,中文文档缺失的东西挺多的,有条件的可以翻看英文文档。

中文文档:https://www.sass.hk

英文文档:https://sass-lang.com/documentation

CSS转Scss: https://www.sass.hk/css2sass

Scss转CSS: https://www.sassmeister.com

你可能感兴趣的:(#,scss,scss,sass,css)