CSS编译工具

SASS

sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。而本教程中所说的所有sass文件都指后缀名为scss的文件。在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。

sass的导入(@import)规则和CSS的有所不同,编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import ‘reset.css‘,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成@import "mixin"

sass的变量必须是$开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(:)分隔开(就像CSS属性设置一样),如果值后面加上!default则表示默认值。

LESS

如果对同一个变量定义两次的话,在当前作用域中最后一次定义的将被使用。这与CSS的机制类似,最后一次定义的值会成为这个属性的值。

多参数混合

多个参数可以使用分号或者逗号分隔,推荐使用分号分隔,因为逗号有两重含义:它既可以表示混合的参数,也可以表示一个参数中一组值的分隔符。

使用逗号作为参数分隔符意味着可以将逗号分隔的一组值作为一个变量处理。换句话说,如果编译器在混合的定义或者是调用中找到至少一个分号,就会假设参数是使用分号分隔的,所有的逗号都属于参数中的一组值的分隔符。

2个参数,每个参数都含有通过逗号分隔的一组值的情况:.name(1, 2, 3; something, else)

3个参数,每个参数只含一个数字的情况:.name(1, 2, 3)

使用一个象征性的分号可以创建一个只含一个参数,但参数包含一组值的混合:.name(1, 2, 3;)

逗号分隔的一组值参数的默认值:.name(@param1: red, blue;)

使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时,LESS会应用到所有可以应用的混合上。比如你调用混合时只传了一个参数.mixin(green),那么所有只强制要求一个参数的混合都会被调用:

时间: 2024-10-09 21:47:44

CSS编译工具的相关文章

koala预编译工具的使用

Koala是一个开源的预处理语言图形编译工具,目前已支持Less.Sass.Compass与CoffeeScript. 安装Koala 在Koala官网根据你的系统平台下载对应的版本.Linux系统要求已安装好ruby运行环境. Koata的使用 https://github.com/oklai/koala/wiki/%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8Koala 项目功能 https://github.com/oklai/koala/wiki/%E5%A6%

【腾讯开源】前端预处理器语言图形编译工具 Koala使用指南

摘要:Koala是一款预处理器语言图形编译工具,支持Less.Sass.CoffeeScript.Compass框架的即时编译.无需手动输入命令去编译,后台监听文件是否有改变,如有修改会自动进行编译,能够大大提升Web开发中的工作效率. 近期,我们对腾讯Koala团队进行了专访 ,一款预处理器语言图形编译工具,支持Less.Sass.CoffeeScript.Compass框架的即时编译.本篇文章为大家着重介绍Koala工具的使用进行讲解,以供参考. Koala代码托管地址: https://c

Less/Sass编译工具,koala使用指南

如果你正在使用sass.less或coffee,而没有注意到koala, 那说明你可能已经好久没有更新你的知识库了.koala这个由国人编写的,用于编译sass.less.coffee利器,在最近的短短几个月曝光率不亚 于任何其他的技术.当然这跟其作者的辛勤劳动,让其更强更优秀有很大关系.在此先感谢koala的作者们,感谢你们给我们带来这么棒的免费工具. 其实编译工具有很多,我本人就各种免费的编译sass的工具都试过,一般都是不了了之,要么功能有限,要么编译速度不敢恭维,直到一个偶然的机会遇 到

35款加速网站开发的 CSS 开发工具

网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松.快速地学习 CSS 技术.这些工具中在高效开发 Web 应用程序中发挥重要作用. 在这篇文章中,我们收集了35个最好的 CSS 工具用于加速网站开发,如创建 CSS 菜单,动画,三维模型,响应式页面,动画按钮等等.我们希望你会发现下面的 CSS 工具能够满足您的需求. 您可能感兴趣的相关文章 精心推荐几款超实用的 CSS 开发工具 精心挑选的在线 CSS3 代码生成工具 24款非常实用的CSS3工具终极收藏 推荐10个特别

Less 编译工具

Less 编译工具 虽然你可以选择在浏览器端使用Less,直接在页面中嵌入一个 Less.js 文件,你也可以选择在服务器端使用Less,使用命令行将Less文件编译成最终的CSS文件. 然而,这两种方式都不够灵活,人们更喜欢使用图形界面工具进行编译.常见的工具有 winLess.simpLess.Koala 等,最值得推荐的编译工具,非 Koala 莫属. Koala是由国人开放的一款开源的前端预处理器语言图形编译工具,可以跨平台运行,完美兼容windows.linux.mac,支持Less.

Eclipse反编译工具Jad及插件JadClipse配置

Jad是一个Java的一个反编译工 具,是用命令行执行,和通常JDK自带的java,javac命令是一样的.不过因为是控制台运行,所以用起来不太方便.不过幸好有一个eclipse的 插件JadClipse,二者结合可以方便的在eclipse中查看class文件的源代码. 1  下载Eclipse反编译工具Jad. 下载路径:  http://pan.baidu.com/s/1tOSO2 2 把下载包中的 net.sf.jadclipse_3.3.0.jar放入到 eclipse的安装目录下,..

myeclipse安装jadclipse(反编译工具)

我是myeclipse5.5 的IDE工具.为了能反编译class文件,上网搜索了很多资料,终于找到一下的一段资料: 1.将jad.exe 复制到myeclipse安装目录的jre/bin目录下, 如:C:/Program Files/MyEclipse 5.5.1 GA/jre/bin/jad.exe : 2.然后将net.sf.jadclipse_3.2.4.jar复制到myeclipse安装目录下的eclipse/plugins目录下, 如:C:/Program Files/MyEclip

Java 反编译工具下载

反编译,通俗来讲,就是将.java 文件经过编译生成的 .class 文件还原.注意这里的还原不等于 .java 文件.因为Java编译器在编译.java 文件的时候,会对代码进行一些处理. 那么接下来介绍几款 Java 反编译工具: 1.jad 这是一款使用很广泛的 Java 反编译工具,对 Java 底层代码的还原比较彻底.ps:个人比较喜欢这款 官网:https://varaneckas.com/jad/ 个人百度云下载地址:链接:http://pan.baidu.com/s/1jHNLx

Linux上安装编译工具链

在Linux上安装编译工具链,安装它会依赖dpkg-dev,g++,libc6-dev,make等,所以安装之后这些依赖的工具也都会被安装.ubuntu软件库中这么描述 Informational list of build-essential packages If you do not plan to build Debian packages, you don't need this package. Starting with dpkg (>= 1.14.18) this package