scss --- css的预处理器
发布日期:2021-06-29 12:06:16
浏览次数:3
分类:技术文章
本文共 1952 字,大约阅读时间需要 6 分钟。
scss(sass):
概念:scss是css预处理器, 世界上最成熟、最稳定、最强大的专业级CSS扩展语言, scss是一门高于CSS的语言,它能用来 清晰的、结构化地描述文件样式,有着比普通CSS更加强大的功能.,能够提供更简洁、更优雅的语法、同时提供多种功能来创建可维护和管理样式表.
其他css预处理器:sass(scss), less, Stylus, DT CSS, Switch CSS, Turbine, Switch CSS, CSS Cacheer
原理:Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能,让CSS编程变得异常强大. 当然浏览器是不认识Sass语法. 开发人员写完了Sass的语法文件后需要通过工具转成原始的CSS代码.
安装:
sass基于Ruby语言开发而成,因此安装sass前需要安装Rub(安装网址:https://rubyinstaller.org/downloads/) 安装完成后需测试安装有没有成功,运行CMD输入以下命令: ruby -v gem install sass gem install compass编译scss:
//单文件转换命令sass input.scss output.css//单文件监听命令sass --watch input.scss:output.css//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:sass --watch app/sass:public/stylesheets
vscode 使用scss:
1.安装 easy sass2.修改vscode的配置(以下代码直接复制替换源码),注意:使用编辑器打开文件夹,不然保持的时候会出现路径问题,因为配置文件里面使用的是相对路径"easysass.compileAfterSave": true,"easysass.formats": [ //nested:嵌套缩进的 css 代码。//expanded:没有缩进的、扩展的css代码。//compact:简洁格式的 css 代码。//compressed:压缩后的 css 代码 { "format": "expanded", "extension": ".css" }, { "format": "compressed", "extension": ".min.css" }],"easysass.targetDir": "./css" //路径
使用:
-
使用变量:
$变量名 eg: $color: red; 注意:如果变量定义在了{ }规则块内,就只能在这个块内使用// 在{}号外面定义的变量是全局变量$color:red; $color:red; // 全局变量 a{ $color:blue; // 花括号内定义的是局部变量 color:$color; // bulie } .bb{ color:$color; //red; } $color:yellow !global; // 变成全局变量 $color:red !default; // 默认变量 // 特殊变量 ( #{表达式/变量}; 进行字符串拼接 ) $aa:top; #dd{ border-#{$aa}:1px solid red; }
-
嵌套css规则
#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE }} article a { color: blue; &:hover { color: red }}
-
循环
@for $i from 1 to 9 { } // 不包含9. 即1-8 @for $i from 1 through 9 { } // 包含9. 即1-9
-
分支
@if $i%2 > 0 { } @else { }
-
混合
@mixin 混合名字 来定义代码块
-
引用
@include 混合名字
-
继承
@import “文件” eg: @import “public.css”
-
综合
$color: red;
@import “public.scss”; @mixin border{ width:100px; } #box{ @include border; }
转载地址:https://blog.csdn.net/ZZZ___jh/article/details/117520560 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月06日 00时20分55秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
电动汽车的“专属危险”:网络威胁问题不容小觑
2019-04-29
短暂的告别,马上再回来
2019-04-29
统治50年:为什么SQL在如今仍然很重要?
2019-04-29
测试是一场竞争,而数据每次都会获得胜利
2019-04-29
读心的测谎系统:究竟是骗子还是个天才?
2019-04-29
最大规模技术重建:数据库连接从15000个到100个以下
2019-04-29
复工之后:员工如何改善网络安全?
2019-04-29
70%求职者因此被拒,你还不避开这些“雷区”?!
2019-04-29
办法不在多,有用就行!用Dropout解决过度拟合问题
2019-04-29
色情演员识别?绝对是人脸识别最糟糕的应用……
2019-04-29
让强化学习逃离“乏味区域陷阱”,试着加点噪音吧!
2019-04-29
超详细Spring Boot面试问题集锦,死角一个不留!
2019-04-29
10个业余时间可完成的项目,助你飞速提升编码能力!
2019-04-29
网络爬虫初涉——用python爬取网络小说
2019-04-29
Pycharm+tensorflow dropout 学习(三)
2019-04-29
Pycharm+tensorflow CNN 学习(四)
2019-04-29
用python暴力破解压缩包密码
2019-04-29
基于OpenCV 将图片进行预处理,转变为MNIST图片格式
2019-04-29
PyCharm+Tensorflow CNN调用训练好的模型进行预测 (五)
2019-04-29
物联网平台Node-red初涉——访问搭建的简易服务器
2019-04-29