SCSS学习笔记(一)
SCSS的由来
SCSS就是加强版的CSS,要讲SCSS那就一定要从SASS讲起
SASS
Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。2007年发行,2016年版本稳定,设计和开发分开进行,让这个语言的功能相当完善。
Sass是像CSS一样的层叠样式表语言,但是它并不是由前端社区发明的,而是由Ruby社区发明创造,为什么Ruby社区要为前端创造语言,这是因为Ruby社区中有一个全栈Web框架Rails,这个框架包含前端和后端的开发,所以当Ruby社区的人发现CSS并不好用,就发明了一套语言叫做Sass,下面是Sass语法的特点
#sidebar
width: 30%
background-color: #faa
Sass语法如上图所示,它写法极简,省略掉了大括号和分号,但是和python一样,缩进需要严格按照规定,这样子的语法让很多前端工程师很不适应,所以出现了了SCSS,SCSS将括号分号又给添加回来了,例如
#sidebar {
width: 30%;
background-color: #faa;
}
你肯定想说,这样又和CSS有什么区别,实际上SCSS保留了SASS的其他部分功能
SCSS的用法
SCSS相较于CSS加入了编程元素,作为CSS的预处理器,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。
变量
SCSS允许使用变量,所有变量以$开头。
$blue : #1875e7;
div {
color : $blue;
}
有了变量,当需要集体修改色型的时候就会方便很多
嵌套
SCSS中允许嵌套,例如CSS中
div h1 {
color : red;
}
这样的语法可以改写成
div {
h1 {
color: red;
}
}
mixin
mixin可以声明重用一个代码块,例如
使用@mixin定义一个代码块
@mixin left {
float: left;
margin-left: 10px;
}
使用@include引入这个代码块
div {
@include left;
}
编译成CSS是这样的
div {
float: left;
margin-left: 10px;
}
另外,mixin支持参数,可以像写函数一样写CSS,例如
@mixin left($value: 10px) {//默认是10px
float: left;
margin-right: $value;
}
引入时,可以自己添加参数
div {
@include left(20px);
}
placeholder
一直引入代码块,编译成CSS的时候还是会有很多的重复代码,
使用placeholder可以节省代码,用法是用%定义一个公用样式
%box {
float: left;
margin-left: 10px;
}
然后用@extend来调用
.selector {
@extend %box;
}
.nav>ol>li {
@extend %box;
}
编译成CSS时就是
.selector,
.nav>ol>li {
float: left;
margin-left: 10px;
}
不拷贝样式,把选择器提到了样式前面
最新文章
- AMD and CMD are dead之KMD.js依赖可视化工具发布
- P1546 最短网络 Agri-Net
- oracle备忘
- 【erlang】IPv6格式转IPv4
- MySQL分库分表总结参考
- 多余的Using Namespaces或引用会影响程序的执行效率么?
- Java中的List(转)
- 理解java中【同步】和【死锁】
- CentOS7安装完毕,重新开机启动后显示: Initial setup of CentOS Linux 7 (core)
- Vue.js 技术揭秘(学习) vue流程
- Wireshark简单使用教程3——附视频
- Machine.config 文件中节点<;machineKey>;的强随机生成
- VBA 插入图片到指定单元格并保存图片为图片文件
- 负载均衡集群相关、LVS介绍、LVS调度算法、LVS NAT模式搭建
- Solr7.1---简单搜索
- es6基础(1)--声明
- TensorFlow Saver 保存最佳模型 tf.train.Saver Save Best Model
- [信息检索] 第一讲 布尔检索Boolean Retrieval
- IOS 缓存方案(按需缓存 、 预缓存)及 低网速模拟
- [SCOI2010]传送带 三分法
热门文章
- oj教程--深度优先DFS
- 路径修改后cmd命令行窗口仍然没有变化的原因
- numpy最后一部分及pandas初识
- python如何data格式和时间戳的转换
- Spring Cloud Alibaba 2021.0.1.0 发布:版本号再也不迷糊了
- Laravel 报错: Dotenv values containing spaces must be surrounded by quotes.
- vue全局引入公共scss样式,子组件调用
- 前端—我的第一篇博客 梦开始的地方(面向对象版tab栏)
- 关于API和SDK的个人理解及两者区别
- Rafy 框架:领域控制器