SCSS的了解和使用方法
SCSS的了解和使用方法
官方文档
首先注意,这里的sass和我们的scss是什么关系sass和scss其实是
一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。
而scss则和css的规范是一致的。
搭建小型测试环境
为了方便应用scss，我们可以在vscode中安装一个名为页面结构如下easy sass的插件，但是我们只在该项目中工作区中应用该插件，因为在项目中，不需要该插件的辅助
首先我们新建一个文件夹test，然后我们在test下新建一个index.html，并新建一个test.scss
Document - 锐客网
Hello World文章标题文章内容 百度
侧边栏
我们使用的
easy sass插件会自动的帮助我们把test.scss => test.css变量
sass使用$符号来标识变量$highlight-color: #f90上面我们声明了一个 名为
$highlight-color的变量, 我们可以把该变量用在任何位置#app {
background-color:$highlight-color;
}以空格分割的多属性值也可以标识变量
$basic-border: 1px solid black;
#app {
background-color:$highlight-color;
border: $basic-border
}变量范围
与
CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
background-color: black
}# 编译后 nav {
width: 100px;
color: #F90;
background-color: black;
}
在这段代码中，
$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块 内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。嵌套语法
和less一样,scss同样支持
嵌套型的语法#content {
article {
h1 { color: #1dc08a }
p {font-style: italic;
}
}
aside { background-color: #f90 }
}转化后
#content article h1 {
color: #1dc08a;
}#content article p {
font-style: italic;
}#content aside {
background-color: #f90;
}
&父选择器
假如你想针对某个特定子元素 进行设置
比如
#content {
article {
h1 { color: #1dc08a }
p {font-style: italic;
}
a {
color: blue;
&:hover { color: red }
}
}
aside { background-color: #f90 }
}学到这里,我们会发现scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是小结： 这样我们就可以通过admin模板来做我们的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8k... 可以加公众号获取提取码.@变量名, 而scss采用的$变量名
【SCSS的了解和使用方法】若有不懂的地方，请加q群147936127交流或者vx: ltby52119，谢谢~
文章图片
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量