文章目录

一、为什么有出现css预处理器
二、css预处理器(Sass/Scss、Less......)是什么？
三、Sass和Scss的关系
四、配置Sass编译环境
五、Sass语法拓展
- 5.1 先择器嵌套
- 5.2父类选择器 &
- 5.3 属性嵌套
- 5.4 占位符选择器
六、sass注释
七、sass变量
- 7.1 定义规则
- 7.2 变量值类型
八、SASS导入@import
九、SASS混合指令(Mixin Directives)
十、插值语句
十一、SASS为我们提供了很多函数

一、为什么有出现css预处理器

css不是一种编程语言，仅仅只能用来编写网站样式，随着用户需求增加以及网站技术升级，css一成不变的写法渐渐不能满足于项目。没有类似js这样的编程语言所有的变量，常量以及其他编程语法，css的代码会显得臃肿以及难以维护。于是css预处理器就作为css扩展，出现在前端技术中。

二、css预处理器(Sass/Scss、Less…)是什么？

css预处理器用一种专门的编程语言，进行web页面样式设计，然后再编译成正常的css文件，以供项目使用。

三、Sass和Scss的关系

sass从第三代开始，放弃了缩进式风格，并且完全向上兼容普通的css代码，这一代的sass也被称为scss。

四、配置Sass编译环境

Tips

我们在这里测试学习才会要这样安装配置，一般像vue脚手架都给我们配置好了，我们直接用就可以了。

{"liveSassCompile.settings.formats": [{/*:nested - 嵌套格式:expanded - 展开格式:compact -紧凑格式:compressed - 压缩格式*/"format": "expanded","extensionName": ".css","savePath": "~/../css"}],/*排除目录*/"liveSassCompile.settings.excludeList": ["/**/node_modules/**","/.vscode/**"],/*是否生成对应的map*/"liveSassCompile.settings.generateMap": true,/*是否添加兼容前缀 例如: -webkit -moze- ....等*/"liveSassCompile.settings.autoprefix": ["> 1%","last 2 versions"],"explorer.confirmDelete": false}

五、Sass语法拓展

5.1 先择器嵌套

原始css

.container{width: 1200px;margin: 0 auto;
}.container .header{height: 90px;line-height: 90px;
}.container .header .logo{width: 100px;height: 60px;
}.container .center{height: 600px;background-color: #F00;
}
.container .footer{font-size: 16px;text-align: center;
}

使用sass语法嵌套改写

.container{width: 1200px;margin: 0 auto;.header{height: 90px;line-height: 90px;.logo{width: 100px;height: 60px;}}.center{height: 600px;background-color: #F00;}.footer{font-size: 16px;text-align: center;}
}

5.2父类选择器 &

原始css

.container{width: 1200px;margin: 0 auto;
}.container a{color: #333;
}.container a:hover{text-decoration: underline;color: #F00;
}.container .top{border: 1px solid red;
}
.container .top-left{float: left;width: 200px;
}

使用sass改写

.container{width: 1200px;margin: 0 auto;a{color: #333;// &代表父&:hover{text-decoration: underline;color: #F00;}}.top{border: 1px solid red;// &代表父&-left{float: left;width: 200px;}}
}

5.3 属性嵌套

.container a{color: #333;font-size: 14px;font-family: Arial, Helvetica, sans-serif;font-weight: bold;
}

.container {a{color: #333;font: {size: 14px;family: Arial, Helvetica, sans-serif;weight: bold;}}
}

5.4 占位符选择器

scss

.button%base{font-weight: normal;text-align: center;
}.btn-default{// 加上这一句就会应用上面的样式// 也叫继承样式@extend %base;color:#333;
}
.haha{@extend %base;color: pink;
}
.hehe{color: greenyellow;
}

sass编译后的css

.button.haha, .button.btn-default {font-weight: normal;text-align: center;
}.btn-default {color: #333;
}.haha {color: pink;
}.hehe {color: greenyellow;
}/*# sourceMappingURL=css.css.map */

六、sass注释

/* 注释的内容*/ 会显示在源代码中
// 单行注释

七、sass变量

原来在css中定义变量

/* 所有的选择器中都可以使用 */
:root {--color: pink;
}body{--border-color: green;
}/* 只能在header选择器中才能使用 */
.header{--background-colr: #f8f8f8;
}

7.1 定义规则

变量以美元符号$开头，后面跟变量名
变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符）
写法同css，即变量名和值之间用冒号分隔
变量一定要先定义后使用

连接符与下划线
通过连接符与下划线定义的同名变量为同一变量，建议使用连接符

$font-size:14px
$font_size:16px;
.continer{ font-sze:$font-size; }

7.2 变量值类型

SASS支持6种主要的数据类型

数字：1，2， 13， 10px
字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz
颜色，blue, #f8f8f8, rgba(255.0,0,0.5)
布尔型：true, false
空值：null
数组(list),用空格或逗号分隔符, 1.53m 1em 0 2em, Arial, sans-serif
maps:相当于javascript的object (key1:value1, key2:value2)

八、SASS导入@import

@import
SASS拓展了@import的功能，允许其导入SCSS或SASS文件，被导入的文件将合并编译到同一个css文件中，另外，被导入的文件中所包含的变量或者混合指令(mixin)都可以在导入的文件中使用。
如：
public.scss

$font-base-color:#333;

在index.scss里面使用

@import "public";
$color:#666;
.container{border-color:$color;color:$font-base-color;
}

如下几种方式，都将作为普通的css语句，不会导入任何sass文件
1、文件拓展名是 css;
2、文件名以http://开头;
3、文件名是url();
4、@import包含media quenes;

@import "public.css;
@import url(public);
@import "http://xxx.xom/xxx;
@import 'landscape' screen and (orientation:landscape);

Tips: 一个模块可以加一个scss比如_user.scss, _shop.scss等。
_public.scss

$base_font_size: pink;

css.scss

@import 'public';
p{color: $base_font_size;
}

九、SASS混合指令(Mixin Directives)

混合指令(Mixin)用于定义可重复使用的样式。

定义与使用混合指令@mixin

@mixin mixin-name(){/* css声明 */
}

定义

// 定义页面一个区块基本的样式
@mixin block{width: 96%;margin-left: 2%;border-radius: 8px;border: 1px solid red;
}

使用

.container{.block{@include block;}
}

十、插值语句

插值，执行时会取其变量的值。

$font-size: 12px;
$line-height: 30px;
p{font: #{$font-size}/#{$line-height} Helvetica;
}

十一、SASS为我们提供了很多函数

自己去看文档了

一、SASS(SCSS)相关推荐

vue-cli 3.0集成sass/scss到vue项目
尝鲜使用vue-cli 3.0.0-beta.6,很容易就可以完成scss到vue项目中. vue-cli 3提供了两种方式集成sass/scss: 创建项目是选择预处理器sass 手动安装sass- ...
【Sass/SCSS】我花4小时整理了的Sass的函数
[Sass/SCSS]我花4小时整理了的Sass的函数博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各 ...
css预处理器sass/scss入门
sass/scss入门一.css预处理器是什么? 二.为什么要用css预处理器? 三.sass.less.stylus的区别? 四.sass与scss 五.sass安装六.sass常见用法 6.1 ...
sass/lsee 转换css 网站 SASS 转 CSS 工具，在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
sass/lsee 转换css 网站 SASS 转 CSS 工具,在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
Sass(Scss)学习
目录 Sass(Scss)是什么嵌套变量四则运算条件分支循环处理列表处理函数混入(mixin) 继承导入文件 Sass内置函数 String(字符串) 函数数字函数列表(List ...
HBuilder X 配置sass/scss
HBuilder X 配置sass/scss 在工具栏上,找到工具–>插件安装–>插件市场–>搜索sass,步骤如下图所示: 这两种方法选择一种安装插件即可,安装完记得重启hBuil ...
Webpack: CSS 到 Sass/Scss 与 CSS Module
Webpack: CSS 到 Sass/Scss 与 CSS Module 文章目录 Webpack: CSS 到 Sass/Scss 与 CSS Module 前言正文 1. 在 JS 中引入 C ...
Less、Sass\Scss
Less.Sass\Scss less.scss/sass区别都是动态样式语言,比css多出很多功能. scss/sass的功能有变量.嵌套.运算,混入(Mixin).继承.颜色处理,函数等,Sas ...
html用css画多边形,Sass绘制多边形_Preprocessor, Sass, SCSS, clip-path, CSS处理器, 会员专栏教程_W3cplus...
CSS画图形在Web运用中时常看到,比如三角形.五角星,心形,Ribbon等.不过以前使用CSS绘制图形一般都是借助于border来绘制,但这样的方式受到一定的限制,而且实用价值也有所限制.这篇文章将 ...

一、SASS(SCSS)