sass基础操作记录

sass基础操作记录

• sass是什么
• 基本操作
• 1. 安装
• 2. 使用
• 3. 基本用法
• 3.1 变量
• 3.2 计算功能
• 3.3 嵌套
• 3.4 注释
• 4. 代码的重用
• 4.1 继承
• 4.2 Mixin
• 4.3 颜色函数
• 4.4 插入文件
• 5.1 条件语句
• 5.2 循环语句
• 5.3 自定义函数
• 参考链接

sass是什么

是css预处理器
基本思想：用一种专门的编程语言，进行网页样式设计，然后再编译成css文件

基本操作

1. 安装

需先安装Ruby，再安装SASS
安装Ruby后

gem install sass

2. 使用

文件后缀名.scss

显示.scss文件转换的css代码

sass text.scss

显示结果保存为文件

sass text.scss text.css

支持四个编译风格

1. nested：嵌套缩进的css代码，它是默认值。
2. expanded：没有缩进的、扩展的css代码。
3. compact：简洁格式的css代码。
4. compressed：压缩后的css代码。

一般使用最后一个

sass --style compressed test.sass test.css

可以监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本

sass --watch input.scss:output.css
sass --watch app/sass:public/stylesheets

3. 基本用法

3.1 变量

以$开头

$blue:#000
color: $blue

如果要嵌套，就写在#{}里面

$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

3.2 计算功能

top: 50px+100px
right: $val * 10%

3.3 嵌套

div{
    h1{
        color: red
    }
}

属性也可以嵌套

p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

嵌套的代码可以用&引用父元素

a {
　　　　&:hover { color: #ffb3ff; }
　　}

3.4 注释

/*    */
//
/*!  */

4. 代码的重用

4.1 继承

.class1 {
　　　　border: 1px solid #ddd;
　　}
  .class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

4.2 Mixin

@mixin命令定义一个代码块

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

@include可以引用

div {
　　　　@include left;
　　}

可以指定参数

@mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}
div {
　　　　@include left(20px);
　　}

4.3 颜色函数

lighten(#cc3, 10%) // #d6d65c

4.4 插入文件

@import "path/filename.scss";

5/高级用法

5.1 条件语句

@if

p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}
  
  @if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

5.2 循环语句

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}
  
 $i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　} 
  
  @each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

5.3 自定义函数

@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

参考链接

SASS用法指南

来源：CSDN

作者：AjingEI

链接：https://blog.csdn.net/m0_37421169/article/details/103686390