CSS之 sass、less、stylus 预处理器的使用方式

CSS之 sass、less、stylus 预处理器的使用方式

更详细区别参考文档:https://blog.csdn.net/pedrojuliet/article/details/72887490

使用变量:

  sass:  使用 $ 符号定义变量,如: $base_color: #efefef

   less: 使用 @ 符号定义变量,如:@base_font_size: 16px

  stylus: 对变量没有任何设定(变量不能以@符号开头),变量之间可以使用 “=”, “空格”或者 “:”,如:  base_font_color: red,   borderwidth=1px,  borderColor #cacaca

 

导入操作(@import):

  如:

base  css文件
/* file.{type} */
body {
  background: #000;
}


xxx css文件
@ import "1.css";
@ import "file.{type}";
p {
  background: #092873;
}


结果
@ import "1.css";
body {
  background: #000;
}
p {
  background: #092873;
}

 

继承:当我们需要为多个元素定义相同的样式的时候,我们可以考虑使用继承的做法

  sass继承:通过 @extend来实现代码组合声明(stylus也可以使用此方法实现继承)

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;  
}

.err {
  @extend .message;
  border-color: red;
}

  less继承

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  .message;
  border-color: green;
}
.error {
  .message;
  border-color: red;
}

 

混入(Mixins):有点像函数或者宏,当某段css经常要在多个元素中使用时,可以为这些共用的css定义一个Mixin,然后在需要的地方引入该Mixin即可

  sass语法:

/* 定义一个混入语法,接受一个变量,默认值为2px,可选 */
@mixin err($borderWidth:2px){
    border:$borderWidth solid #cacaca
    color: #cacaca
}

.generic-error {
    padding: 20px;
    margin: 4px;
    @include error(5px);  /* 调用混入语法,传入一个参数得到 border:5px solid #cacaca*/
}

  stylus语法

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;/* 调用混入语法,传入一个参数得到 border:5px solid #cacaca*/、
error();
}

 

  

怎能让着不停燃烧的心,就这样耗尽消失在平庸里

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/2592.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 全角字符和半角字符的区别和操作方法_手机有半角全角的区别吗

    全角字符和半角字符的区别和操作方法_手机有半角全角的区别吗全角字符的由来#全角符号是双字节中文编码的历史遗留问题。当年在纯文本的界面中,为了让西文和中日韩的方块字对齐,就让西文字母、数字和标点也占用一个汉字的视觉空间,并使用2个字节存储。后来,其中的一些全角字符因为比较有用,就得到了广泛应用(比如全角的逗号「,」、问号「?」、感叹号「!」、空格「 」等),专用于中日韩文本,成为了标准的中日韩标点字符。而其它的许多全角符号失去了价值,因为我们现在很少需要让纯文本的中文和西文字字对齐了,就很少再用了。另外需要说明的是:现在全球文本编码的事实标准是UTF-

    2022年10月22日
  • navcat 15 激活码_在线激活[通俗易懂]

    (navcat 15 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~S…

  • 编程xml速度最快的语言_xml语言是什么的缩写

    编程xml速度最快的语言_xml语言是什么的缩写国际化多语言转换工具方案介绍当项目涉及到多语言国际化的时候,我们需要把string.xml翻译成其他国家语言,一般翻译公司会需要excel等格式文档,可是这翻译文件实在是不好整,幸好有大神做了个py工具实现string文件转excel.目前有两种方式:Localizable.strings2Excel(下载源码,然后在终端输入命令跑脚本进行文件转换)作者:CatchZeng,https://github.com/CatchZeng/Localizable.strings2ExcelL

  • 什么是OJ _OJ是什么?[通俗易懂]

    什么是OJ _OJ是什么?[通俗易懂]OnlineJudgeSystem即在线评测系统(以下简称OJ),用户可以在线的提交程序源代码,OJ会对这些源代码进行编译和运行,并且通过每道题目预先设计的数据和时空限制等标准来检验用户程序的正确性。用户提交的程序在OJ下执行的时候会受到严格的限制,包括且不限于时间的限制、内存的限制、系统接口的限制和安全限制。用户程序执行的输出结果会被OJ接收并保存,然后通过裁判程序进行比较用户输出和标…

  • 深度相机种类_深度相机原理

    深度相机种类_深度相机原理本文首发于微信公众号:计算机视觉life。本文的深度相机制造商涉及:Microsoft、Intel、LeapMotion、Orbbec、图漾、OccipitalStructure、Stereolabs、DUO。文末附深度相机详细对比清单。MicrosoftKinect微软推出了两款Kinect,Kinect一代(Kinectv1)是基于结构光原理的深度相机,Kinect二代(Kine

    2022年10月30日
  • VR全景展示渠道

    VR全景能够给人带来一种身临其境的感受,是一种新颖的广告宣传方式。随着5G的推广和普及,VR全景被各行各业广泛应用,就是将线下真实的场景以3D立体的形式展现在互联网上,以此帮助商家起到宣传展示和引流的效果。那么通过什么样的渠道能够进行VR全景的宣传呢?下面介绍一下:1、百度地图百度地图有着五亿用户,从2018年起,百度地图导航开拓实体商家实际全景进行拍摄,打造出城市街景和內部全景图的无缝拼接,建立VR全景图生态体系,考虑顾客的要求,提升商家的广告宣传力度,在百度地图APP上搜索名字,能够查询到商家全

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号