css3---（框架）-技術動態-匯編語言學習筆記

css3---（框架）

2023-09-13 阅读 11 评论 0

摘要：一：什么是css框架 CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。二：特征 1.抽象出常用的css样式,高再可用性,高移植性 2.有固有的

一：什么是css框架

CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率。

二：特征

1.抽象出常用的css样式,高再可用性,高移植性

2.有固有的定义,详细的文档及开发特点

3.高兼容性,可以兼容流行的浏览器

4.以css为主,但不一定全部是css,可能有一些js(或者其他)脚本用于兼容浏览器。

css框架一：

《less》

LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。
1.定义变量：

@符开头

例：
@width：100px；
@height：100px；
div{
width:@width；
height:@height；
}

css3属性，2.混合：

.bordered {border-top: dotted 1px black;border-bottom: solid 2px black;
}

那如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中像下面这样调用就可以了：

#menu a {color: #111;.bordered;
}
.post a {color: red;.bordered;
}

.bordered class 里面的属性样式都会在 #menu a 和 .post a 中体现出来：

#menu a {color: #111;border-top: dotted 1px black;border-bottom: solid 2px black;
}
.post a {color: red;border-top: dotted 1px black;border-bottom: solid 2px black;
}

3.@arguments变量

@arguments包含了所有传递进来的参数。

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {box-shadow: @arguments;-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

css组件？输出：

box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;-webkit-box-shadow: 2px 5px 1px #000;

4.嵌套

LESS 可以让我们以嵌套的方式编写层叠样式。

css代码：
例：
#header { color: black; }#header .navigation {
font-size: 12px;
}#header .logo {
width: 300px;
}#header .logo:hover {
text-decoration: none;
}
/**********************************************/

less中的写发
#header { color: black;.navigation { font-size: 12px }.logo { width: 300px;&:hover { text-decoration: none }}
}

5.运算及函数

在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，

 @init: #111111; @transition: @init*2; .switchColor { color: @transition; }

CSS框架，经过编译生成的 CSS 文件如下：

 .switchColor { color: #222222; }

6.Comments（注释）

适当的注释是保证代码可读性的必要手段，LESS 对注释也提供了支持，主要有两种方式：单行注释和多行注释，这与 JavaScript 中的注释方法一样，我们这里不做详细的说明，只强调一点：LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，所以如果你的注释是针对样式说明的请使用多行注释。


《sass》
sass是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

1. 变量

变量以$开头

例：　
　$blue : #1875e7;　div {color : $blue;}如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。$side : left;.rounded {border-#{$side}-radius: 5px;}

css布局框架、2.计算

算式：body {margin: (14px/2);top: 50px + 100px;right: $var * 10%;}

3.嵌套

例：div h1 {color : red;}可以写成：div {hi {color:red;}}属性也可以嵌套：p {border-color: red;}可以写成：p {border: {color: red;}}

4. 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

CSS布局。单行注释 // comment，只保留在SASS源文件中，编译后被省略。

5.继承

SASS允许一个选择器，继承另一个选择器。比如，现有class1：.class1 {border: 1px solid #ddd;}
class2要继承class1，就要使用@extend命令：.class2 {@extend .class1;font-size:120%;}

6.条件语句

@if可以用来判断：

　　p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

配套的还有@else命令：

　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

7.循环

SASS支持for循环：@for $i from 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}}
也支持while循环：$i: 6;@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;}