![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
sass
前端OnTheRun
这个作者很懒,什么都没留下…
展开
-
2021-08-24 Sass学习笔记(六) sass的安装和使用
安装 命令:npm install -g sass 使用 新建一个scss文件 style.scss ul{ list-style-type: none; color:red; li{ background-color: seagreen; border:solid; } } 新建一个css文件 index.css //不用写代码 输入命令:sass xxx.scss:aaaaa.css sass style.scss:index.css 发现scss文件被解析成css文件 index原创 2021-08-24 19:47:18 · 460 阅读 · 0 评论 -
2021-06-15 Sass学习笔记(五) 使用gulp-sass插件写css样式
下载相关插件 1.下载全局node,npm,和sass 2.输入命令: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/*")原创 2021-06-15 08:49:39 · 176 阅读 · 1 评论 -
2022-04-20 Sass学习笔记(四) Sass的混入(mixin),继承(extend)和导入(import)
1.Sass混入 @mixin 与 @include @mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。 @include 指令可以将混入(mixin)引入到文档中。 语法 定义: @mixin mixin-name{} 使用: selector { @include mixin-name; } 2.Sass继承 @extend 与 继承 @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。 使用场景 一个样式与另外一个样式几乎相同,只有少量的区别 语法原创 2022-04-20 19:33:03 · 240 阅读 · 0 评论 -
2022-04-18 Sass学习笔记(三) Sass的嵌套:样式的嵌套,父选择器的嵌套,占位符选择器,属性嵌套
1.样式的嵌套 父选择器里可以嵌套子选择器 div{ height: 100px; ul{ height: 80px; li{ height: 50px; } } } 2.父选择器 可以用 & 代表嵌套规则外层的父选择器 a { &:active {//此处&指代其父选择器a color:blue; } span { &:hover {//此处&指代其父选择器span c原创 2022-04-18 20:33:27 · 177 阅读 · 0 评论 -
2022-04-17 Sass学习笔记(二) Sass的语法:变量,条件分支,循环,mixin
文章目录 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标签中不能再嵌套其他标签原创 2022-04-17 00:34:08 · 293 阅读 · 0 评论 -
2022-04-15 Sass学习笔记(一) 概念,安装,引入和使用示例
文章目录 概念 学习手册 下载 使用 示例 css/mysassdoc.scss mysassdoc.css 其他拓展名的文件 后缀是.sass的文件 后缀是.min.css的文件 概念 sass是目前使用最广泛的css拓展语言,是css的预编译工具 经过sass编写的代码需要先解析成相对应的css文件,浏览器才能获得样式 学习手册 官网文档 菜鸟 下载 1.按照官网的说明下载 2.直接在vscode应用商店下载Easy Sass插件 在这里插入图片描述 使用 在一个单独的css文件夹下创建一个扩展名原创 2022-04-15 21:57:52 · 119 阅读 · 0 评论