sass/scss
文章平均质量分 63
新新领域
国籍:火星人
住址:重庆
性别:女
爱好:男
作品:http://www.tpframe.com
展开
-
Sass预处理器 常见函数的基本使用
Sass提供了许多内置模块,其中包含有用的函数(以及mixin)。这些模块可以像任何用户定义的样式表一样使用@use规则加载,它们的函数可以像任何其他模块成员一样调用。所有内置模块URL都以sass开头:表示它们是sass本身的一部分。常见函数简介,更多函数列表可看:https://sass-lang.com/documentation/modules。原创 2022-08-25 10:44:32 · 490 阅读 · 0 评论 -
SASS 插值语句 #{ }的使用
插值语法在使用中还是非常方便的,但有些情况不能使用,但不代表后续不能使用,具体情况根据当前使用的版本来,有可能现目前版本不支持的情况,后续版本可能会支持。关于sass插件语法#{}的使用就介绍到这里,更多教程请关注“老姚实战营”!...原创 2022-08-08 14:21:25 · 518 阅读 · 1 评论 -
SASS 运算 (Operations)符的基本使用
sass 运算符虽然没有像那些编程语言那么强大,但为了更灵活的输出css,也增强了一些运算符的功能,例如赋值运算符、等号操作符、比较运算符、逻辑运算符、字符串运算符…等等,接下来就来详细介绍下这些运算符的基本使用。...原创 2022-08-04 09:36:42 · 166 阅读 · 0 评论 -
sass @extend(继承)指令的详细使用
在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。原创 2022-08-03 09:29:54 · 339 阅读 · 0 评论 -
sass 混合指令 (Mixin Directives)的详细使用
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。...原创 2022-07-15 10:58:18 · 378 阅读 · 0 评论 -
sass 导入@import详解
Sass 拓展了 @import 的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。例如:public.scssindex.scss编译后:**注意:**跟我们普通css里面@import的区别但是如下的几种方式,都将作为普通的 CSS 语句,不会导入任何 Sass 文件局部文件(Partials) Sass源文件中可以通过@import指令导入其他Sass原创 2022-07-13 11:06:13 · 1420 阅读 · 0 评论 -
sass变量的使用,sass与css变量的区别
sass变量同javascript变量,可以用来存储一些信息,并且可以重复使用。先来对比一下css中的变量CSS 变量是由 CSS 作者定义的,它包含的值可以在整个文档或指定的范围内重复使用。原创 2022-07-12 09:56:39 · 1339 阅读 · 0 评论 -
sass语法嵌套规则与注释讲解
避免了重复输入父选择器,复杂的 CSS 结构更易于管理 在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,或者当 body 元素有某个 classname 时,可以用 & 代表嵌套规则外层的父选择器。 ...原创 2022-07-11 09:14:51 · 225 阅读 · 0 评论 -
sass的几种输出格式,你都知道吗
Sass编译输出的CSS格式可以自定义。有4种输出格式:默认格式是:nested。可以使用:style选项或使用style命令行参数设置输出格式。命令标准格式:例如:不同格式输出接下来我们把如下的css经过不同格式的编译,看不同输出格式的区别:nested – 嵌套格式expanded – 展开格式compact – 紧凑格式compressed – 压缩格式总结通过观察不同的输出格式可以看出,compressed – 压缩格式 转出的文件是最小的,所以该格式通过为项目发布时设置的原创 2022-07-08 14:53:28 · 356 阅读 · 0 评论 -
vscode的安装、切换为中文简体、集成sass
打开vscode ,按快捷键“Ctrl+Shift+P”输入configure language,回车选择安装其他语言 (默认是英文的)选择简体中安装(荧光笔标注的地方)按提示重启右下角会有安装成功提示,会有重启(restart)提示按提示重启。源码地址:https://github.com/ritwickdey/vscode-live-sass-compiler/现在3.0.0版本已不再维护,建议下载更高版本源码地址:https://github.com/glenn2223/vscode-live-sa原创 2022-07-07 14:36:05 · 216 阅读 · 0 评论 -
关于sass(scss)、less、postcss、stylus的简介与区别
CSS不是一种编程语言,仅仅只能用来编写网站样式,在web初期时,网站的搭建还比较基础,所需要的样式往往也很简单。但是随着用户需求的增加以及网站技术的升级,css一成不变的写法也渐渐不再满足于项目。没有类似js这样的编程语言所有的变量,常量以及其他的编程语法,css的代码难免会显得臃肿以及难以维护。但是又没有css的替代品,于是css预处理器就作为css的扩展,出现在了前端技术中。 CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为原创 2022-07-05 10:53:41 · 552 阅读 · 0 评论