CSS 預處理器框架

時間 2019-12-12

標籤 css 預處理框架欄目 CSS 简体版

原文原文鏈接

CSS 預處理器框架css

能夠按照需求來使用別人的代碼html

1.sass (compass)canvas

2.less (lesshat/EST)sass

3.提供現成的 mixinapp

4.相似 JS 類庫，封裝經常使用功能框架

css 預處理器常見問題（詳細講解見上篇博客）less

1.常見的 css 預處理器ssh

1.Less(Node.js) 2.Sass (Ruby 但有 Node 版本）ide

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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。