CSS 预处理器框架
参考博客：为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
可以按照需求来使用别人的代码
1.sass (compass)
2.less (lesshat/EST)
3.提供现成的 mixin
4.类似 JS 类库 ，封装常用功能
css 预处理器常见问题（详细讲解见上篇博客）
1.常见的 css 预处理器
1.Less(Node.js) 2.Sass (Ruby 但有 Node 版本）
2.预处理器作用
1.帮助更好地组织 CSS 代码
2.提高代码复用率
3.提升可维护性
3.预处理器能力
1.嵌套 反映层级和约束
2.变量和计算 减少重复代码
3.Extend 和 Mixin 代码片段
4.循环 适用于复杂有规律的样式
5.import CSS 文件模块化
4.预处理器的优缺点
优点：提高代码复用率和可维护性
缺点：需要引入编译过程 有学习成本
演示：
less
.box{ .inline-block(); .opacity(60); height: 100px; background: green; margin:10px;}.left{ float:left; .clearfix();}.row{ .make-row(); .col{ .make-column(1/4); background:red; height: 100px; }}.my-triangle{ margin:100px; // width:100px; // height:200px; // border: 1px solid red;}.my-triangle::after{ content: ' '; .triangle(top left, 100px, red, side);}
html
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < name="viewport" content="width=device-width, initial-scale=1.0"> < http-equiv="X-UA-Compatible" content="ie=edge"> < rel="stylesheet" href="7-est.css"> < >Document</ ></head><body> <div class="box">.box box1</div> <div class="box">.box box2</div> <div class="left">.left</div> <div class="row"> <div class="col">col1</div> <div class="col">col2</div> <div class="col">col3</div> <div class="col">col4</div> </div> <div class="my-triangle"></div></body></html>css
html,body,div,span, , , ,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { padding: 0; margin: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; font-size: 100%; vertical-align: line;}body { line-height: 1;}ol,ul { list-style: none;}table { border-collapse: separate; border-spacing: 0; vertical-align: middle;}caption,th,td { text-align: left; font-weight: normal; vertical-align: middle;}a img { border: none;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,main { display: block; padding: 0; margin: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; font-size: 100%; vertical-align: line;}audio,canvas,video { display: inline-block; *display: inline; *zoom: 1;}audio:not([controls]),[hidden] { display: none;}.box { display: inline-block; *display: inline; *zoom: 1; opacity: 0.6; filter: alpha(opacity=60); height: 100px; background: green; margin: 10px;}.left { float: left; *zoom: 1;}.left:before,.left:after { display: table; content: "";}.left:after { clear: both;}.row { *zoom: 1;}.row:before,.row:after { display: table; content: "";}.row:after { clear: both;}.row .col { display: block; float: left; width: 22.75%; margin-left: 3%; background: red; height: 100px;}.row .col:first-child { margin-left: 0%;}.my-triangle { margin: 100px;}.my-triangle::after { content: ' '; position: absolute; width: 0; height: 0; border: 50px solid red; border-bottom-color: transparent; border-right-color: transparent; margin-top: -50px; margin-left: -50px;}继续阅读与本文标签相同的文章
上一篇 :
Bootstrap 小结
下一篇 :
CSS 工程化 小结
-
Java 学习（20）--异常 / IO 流
2026-05-26栏目： 教程
-
初识 Vue（07）---(Vue 实例的生命周期钩子)
2026-05-26栏目： 教程
-
初识 Vue（06）---(Vue 实例)
2026-05-26栏目： 教程
-
初识 Vue（05）---(组件间传值)
2026-05-26栏目： 教程
-
Java 学习（18）--列表（List）/ 集合 （Set）/ 泛型 / Map
2026-05-26栏目： 教程