css预处理语言,CSS是编程语言吗

一、是什么

　　Css作为一种标记语言，语法相对简单，对用户要求不高，但也带来了一些问题。

　　需要写很多看似不合逻辑的代码，不方便维护和扩展，也不利于复用。尤其对于非前端开发工程师来说，由于缺乏Css编写经验，往往很难写出组织良好、易于维护的Css代码。

　　Css预处理器是解决上述问题的方法。

预处理语言

　　扩展了Css语言，增加了变量、mixin、函数等函数。使得Css更容易维护，更方便。

　　本质上，预处理是Css的超集。

　　它包含一组自定义的语法和一个解析器，并根据这些语法定义自己的样式规则。这些规则最终会通过解析器编译生成相应的Css文件。

二、有哪些

　　 Css预编译语言在前端有三个优秀的预编译处理器，分别是：

　　不时髦的

　　诞生于2007年，最早最成熟的Css预处理器，拥有Ruby社区和最强大的Css框架Compass的支持。目前受LESS影响，已经演变成完全兼容Css的SCss。

　　文件后缀被命名为。sass和scss，所以可以严格按照sass的缩进省略大括号和分号。

　　较少的

　　出现于2009年，受SASS影响较大，但使用了Css语法，更便于大多数开发者和设计者入门。Ruby社区外的支持者远超萨斯。

　　它的缺点是与SASS相比，可编程功能不够，但优点是简单，兼容Css，这反过来影响了SASS向Scss时代的演进。

　　唱针

　　Stylus是一个Css预处理框架，产生于2010年，来自Node.js社区。主要用于为节点项目提供Css预处理支持。

　　因此，Stylus是一种新的语言，它可以创建健壮的、动态的和富有表现力的Css。因为年轻，他做的事情本质上和萨斯差不多。

三、区别

　　尽管各种预处理程序功能强大，但以下功能是最常用的：

　　变量、范围、代码、混合、嵌套规则和代码、模块。所以，下面是这几个方面的区别。

　　基本用途

　　Less和scss。box { display:block；}sass。框显示：块状手写笔。框显示：块嵌套

　　三者的嵌套语法是一致的，甚至引用父选择器的标签也是一样的。

　　只是Sass和Stylus可以不用花括号写。

　　较少的。一个{。b {颜色：红色；}}变量

　　变量无疑为Css增加了一种有效的重用方法，减少了Css中不可避免的重复“硬编码”。

　　less声明的变量必须以@开头，后跟变量名和变量值，用冒号分隔：

　　@ red:# c00；

　　strong { color:@红色；}sass声明的变量与less非常相似，只是变量名以@开头

　　$ red:# c00；

　　strong { color:$红色；}对}stylus声明的变量没有限制，可以使用以$开头，以结尾的分号；它是可选的，但是你需要在变量和变量值之间使用=。

　　在stylus中，我们不建议在开头使用@符号来声明变量。

　　红色=#c00

　　强烈的颜色：红色范围

　　Css预编译器把变量赋予作用域，也就是生命周期的存在。就像js一样，先从局部范围寻找变量，然后到上级范围。

　　sass中不存在全局变量。

　　$颜色：黑色；scoped { $ BG:blue；$颜色：白色；颜色：$ color背景色：$ bg}.未分类的{ color:$ color；}编译后。作用域{ color:white；/*是白色*/背景色：蓝色；}.未划线{颜色：白色；/* white(没有全局变量概念)*/}所以，最好不要在sass中定义相同的变量名。

　　less和stylus的范围和javascript非常相似。首先，它将寻找局部定义的变量。如果没有找到，就会像冒泡一样一级一级往下找根。

　　@颜色：黑色；作用域{ @ BG:blue；@color:白色；颜色：@颜色；背景色：@ bg}.未分割的{ color:@ color；}编译后：作用域{ color:white；/* white(调用的局部变量)*/background-color:blue；}.未划线{颜色：黑色；/* Black(全局变量调用)*/}

混入

　　混音应该说是预处理程序最本质的功能之一。简单来说，mixing可以提取一些样式作为单独定义的模块，被很多选择器重用。

　　您可以在Mixins中定义变量或默认参数。

　　在less中，mixing的用法是指将一个定义的ClassA引入到另一个定义的类中，也可以传递参数，参数变量声明为@。alert { font-weight:700；}.突出显示(@ color:red){ font-size:1.2 em；颜色：@颜色；}.单挑。警惕；高亮(红色)；}编译后。alert { font-weight:700；}.平视{ font-weight:700；字号：1.2em颜色：红色；}Sass在声明mixin时需要使用@ mixin，后跟mixin的名字，也可以设置参数，参数的名字是variable $ declaration form。

　　@ mixin large-text { font:{ family:Arial；尺寸：20px粗细：加粗；}颜色：# ff0000}.page-title { @ include large-text；填充：4px页边距-顶部：10px}输入笔的混合与前两种Css预处理语言的混合略有不同。它可以简单地声明Mixins名称而不使用任何符号，然后通过等号(=)将定义的参数与默认值连接起来。

　　error(border width=2px){ border:border width solid # F00；颜色：# F00}.一般错误{ padding:20px；保证金：4px错误()；/*调用错误混合*/}。登录错误{ left:12px；位置：绝对；top:20px；误差(5px)；/*调用error mixins并将参数$borderWidth的值指定为5px */}

代码模块化

　　模块化就是将Css代码分成模块。

　　scss、less和stylus的使用方法如下

　　@import 。/common ；@import 。/github-markdown ；@import 。/mixin ；@import 。/variables ；

参考文献

　　 https://mp.weixin.qq.com/s/HUEnnJKJDTp8Vlvu2NfUzA

　　这就是本文关于Css预编程语言和差异的详细解释。更多相关Css预编程语言内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。