
Sass/Scss
Sass作为css扩展语言,预处理语言,具有学习必要,方便开发
Army-海军
致力于前端开发,不做此行专家不罢休
展开
-
Scss中的指令@import、@media、@extend 继承、@mixin、@include
Sass 支持所有的 CSS3 @-Rules,以及 Sass 特有的 “指令”(directives)1.@import@import的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。通常,@import寻找 Sass 文件并将其导入,但在以下情况下,@import仅作为普通的 CSS 语句,不会导入任何 Sass 文件。文件拓展名是.css; ...原创 2020-05-11 16:10:21 · 20445 阅读 · 18 评论 -
Scss中使用变量、运算
1.$变量最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样2.数据类型3.运算原创 2020-05-11 15:01:45 · 27743 阅读 · 21 评论 -
Scss中的嵌套规则
1. Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器#app { h1 { text-align: center; }}编译结果#app h1 { text-align: center; }避免了重复输入父选择器,而且令复杂的 CSS 结构更易于管理2.父选择器&在上一个例子中如果父子嵌套,但是我想操作 #app 的:hover 此时可以用&代表嵌套规则外层的父选择器。a ...原创 2020-05-11 13:59:47 · 19256 阅读 · 20 评论 -
Scss和sass的学习前的准备
官网地址:https://www.sass.hk/我选择官方推荐最简单方案,最靠谱那个方案。方案:写一个scss文件,实时编译生成一个css文件,一个html引进去再开个服务,浏览器中看的见写的效果。这样子后就可以继续学习了。否则看不到效果一切白搭。首先安装个vscode 下载地址https://code.visualstudio.com/...原创 2020-05-11 11:45:10 · 14871 阅读 · 25 评论