GAARA

安装命令:npm install -g sass使用新建一个scss文件style.scssul{ list-style-type: none; color:red; li{ background-color: seagreen; border:solid; }}新建一个css文件index.css//不用写代码输入命令:sass xxx.scss:aaaaa.csssass style.scss:index.css发现scss文件被解析成css文件index

下载相关插件1.下载全局node,npm,和sass2.输入命令:npm init,初始化项目环境,生成package.json文件3.输入命令:npm i gulp-sass -D,下载gulp-sass插件搭建环境配置新建一个gulpfile.js文件gulpfile.js:// sass转css//引入sass文件const sass = require("gulp-sass");function sassFn() { return src("./sass/*")

1.Sass混入 @mixin 与 @include@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。@include 指令可以将混入（mixin）引入到文档中。语法定义:@mixin mixin-name{}使用:selector { @include mixin-name;}2.Sass继承 @extend 与 继承@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。使用场景一个样式与另外一个样式几乎相同，只有少量的区别语法

1.样式的嵌套父选择器里可以嵌套子选择器div{ height: 100px; ul{ height: 80px; li{ height: 50px; } }}2.父选择器可以用 & 代表嵌套规则外层的父选择器a { &:active {//此处&指代其父选择器a color:blue; } span { &:hover {//此处&指代其父选择器span c

文章目录1.变量常见使用场景语法示例2.条件分支常见使用场景语法示例3.循环常见使用场景语法1.@for 指令2.@each 指令示例一:for循环li节点的样式示例二:each..in节点的样式4.混合(Mixin)语法示例5.知识点5.1.索引函数`$idx:index($list,$item)`5.2.css的循环是从1开始的5.3.浏览器兼容性5.4.html的p标签中不能再嵌套其他标签

文章目录概念学习手册下载使用示例css/mysassdoc.scssmysassdoc.css其他拓展名的文件后缀是.sass的文件后缀是.min.css的文件概念sass是目前使用最广泛的css拓展语言,是css的预编译工具经过sass编写的代码需要先解析成相对应的css文件,浏览器才能获得样式学习手册官网文档菜鸟下载1.按照官网的说明下载2.直接在vscode应用商店下载Easy Sass插件在这里插入图片描述使用在一个单独的css文件夹下创建一个扩展名