CSS 预处理器框架

简介: CSS 预处理器框架参考博客:为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus可以按照需求来使用别人的代码1.

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>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="7-est.css">
    <title>Document</title>
</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,
applet,
object,
iframe,
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: baseline;
}
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: baseline;
}
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;
}
目录
相关文章
|
1月前
|
前端开发 IDE JavaScript
探秘 Sass 之路:掌握强大的 CSS 预处理器(上)
探秘 Sass 之路:掌握强大的 CSS 预处理器(上)
|
1月前
|
存储 前端开发 开发工具
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!(二)
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!
|
1月前
|
前端开发
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!(一)
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!
|
1月前
|
前端开发
【第18期】一文读懂原子CSS框架
【第18期】一文读懂原子CSS框架
34 0
|
7天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
|
7天前
|
前端开发 开发者
前端开发中的CSS预处理器Sass
在前端开发中,CSS预处理器Sass是一种非常实用的工具,能够提高代码的可维护性和扩展性。本文将介绍Sass的基本语法、特性以及在实际项目中的运用,帮助读者更好地理解和应用这一技术。
7 0
|
1月前
|
前端开发 JavaScript 开发者
探秘 Sass 之路:掌握强大的 CSS 预处理器(下)
探秘 Sass 之路:掌握强大的 CSS 预处理器(下)
|
1月前
|
前端开发 编译器 Python
拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美
拥抱简洁:探索Stylus的简洁语法与CSS预处理器之美
|
1月前
|
存储 前端开发 JavaScript
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!(三)
CSS编写的瓶颈在哪里?CSS预处理器登场解决你的燃眉之急!
|
1月前
|
前端开发
若依框架----图标(可能不全)css
若依框架----图标(可能不全)css
29 0

相关产品

  • 云迁移中心