scss常见用法

scss常见用法

简介

Sass采用两种语法规则(syntaxes)，新规则称为“SCSS”，是CSS3语法的扩展，任何语法正确的CSS3文件也是合法的SCSS文件。文件扩展名为 .scss。另一种语法称为缩进语法，模仿Haml简洁性，以更精简的方式书写CSS，使用行缩进指定CSS块，尽管不是原始语法，但缩进语法将继续被支持。

注释

有三种形式：

(1) //comment：仅在 .scss源文件中可见，编译后的CSS文件中不存在。

(2) /! /：重要注释，所有CSS文件都会包含，常用于放置版权说明等信息。

(3) / /：在压缩版CSS文件中不存在，其他CSS文件包含。

Quick Start 安装与构建

1. 切换到 .scss文件所在的目录。

运行命令：sass --style compressed test.scss test.css，生成压缩版CSS文件test.css。

2. 选项参数说明： --style 后有四个选项可选，包括expanded、nested、compact、compressed，可根据需求选择不同效果。

3. 使用侦听命令自动编译文件： sass --watch --style compressed test.scss:test.css 或 sass --watch --style compressed sass:css。

Webpack 集成

Webpack内置sass-loader，配置简单，但需注意依赖node-sass和sass(gem)。

变量与选择器变量定义

以$开头定义变量，作用域限于定义层级及其子层级，若定义在嵌套选择器外，则全局可用。例如：$color1:#aeaeae; .div1{ background-color:$color1; }。

使用!global关键字使局部定义的变量成为全局变量： #main { $width: 5em !global; width: $width; } #sidebar { width: $width; }。

嵌套引用

使用#{}包裹字符串插值： $left:left; .div1{ border-#{$left}-width:5px; }。

变量计算

Sass支持变量计算，如：$left:20px; .div1{ margin-left:$left+12px; }。

选择器嵌套

.div1{ .span1{ height: 12px; } .div2{ width: 16px; } } 属性嵌套，如： p { border: { color: red; } }。

父元素引用

.div1{ &:hover{ cursor: hand; } }。

代码重用与继承

选择器可以继承另一个选择器的样式，例如：.class1{ font-size:19px; } .class2{ @extend .class1; color:black; }。

引用外部CSS文件

@import命令导入外部CSS文件。

Mixin与Include

Mixin可重用代码块，定义@mixin，调用@include。如： @mixin left { float: left; margin-left: 10px; } div { @include left; }。

参数与缺省值

使用@mixin定义代码块，@include调用，可设置参数与缺省值： @mixin common($value1,$value2,$defaultValue:12px){ display:block; margin-left:$value1; margin-right:$value2; padding:$defaultValue; }。

编程式方法与流程控制

@if用于条件判断，@else与@elseif配合使用。循环语句支持for、while及each。

函数

允许定义自定义函数，如@function double($n) { @return $n * 2; }。

颜色函数

SASS内置颜色函数，如：lighten(#cc3, 10%)、darken(#cc3, 10%)、grayscale(#cc3)、complement(#cc3)。

结尾

通过本文，学习了SCSS的常见用法，包括变量、注释、选择器、计算、继承、导入、混合、流程控制与函数等关键点。SCSS提供了更灵活、简洁的CSS编译方式，适用于前端开发的高效实践。2024-09-26