sass less
https://www.w3cplus.com/css/the-absolute-beginners-guide-to-sass.html
sass : 没有分号和{};
1234#skyscraper_addisplay: blockwidth: 120pxheight: 600pxsass 嵌套: 选择器嵌套(类似jade的Html 嵌套)
12px 12345678.speaker.namefont:weight: boldsize: $fontsize + 10px.positionfont:size: $fontsize
属性嵌套:
变量: 可以设置变量,然后还会有一些内置的函数,如颜色变亮(lighten),变暗(darken)
自定义混合函数,@minix 设置。@include 调用
@mixin border-radius($amount: 5px)
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount
h1
@include border-radius(2px)
.speaker
@include border-radius
```
5.@extend 选择器继承
三种不同CSS预处器的蛮量、功能以及他们的好处——Sass、LESS和Stylus
三个嵌套是一样的语法
Sass声明变量必须是“$”开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号(:)隔开。就像CSS属性一样:
混合: @minix A(){} 调用: @include A()
LESS声明变量和Sass声明变量一样,唯一区别是变量名前面使用是的“@”字符:
混合: .A(){} 调用 .A()
Stylus声明变量没有任何限定,你可以使用”$”符号开始。结尾的分号(;)可有可无,但变量名和变量值之间的等号(=)是需要的。有一点需要注意的是,如果我们使用”@”符号开头来声明(0.22.4)变量,Stylus会进行编译,但其对应的值并不会赋值给变量。换句话说,在Stylus中不要使用“@”符号开头声明变量。
混合: A(){} 调用: A()
选择器
定位
- CSS中Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。
◆position:static 无定位
该属性值是所有元素定位的默认情况,在一般情况下,我们不需要特别的去声明它,但有时候遇到继承的情况,我们不愿意见到元素所继承的属性影响本身,从而可以用position:static取消继承,即还原元素定位的默认值。
◆position:absolute 绝对定位
使用position:absolute,能够很准确的将元素移动到你想要的位置,
◆position:fixed 相对于窗口的固定定位
这个定位属性值是什么意思呢?元素的定位方式同absolute类似,但它的包含块是视区本身。在屏幕媒体如WEB浏览器中,元素在文档滚动时不会在浏览器视察中移动。例如,它允许框架样式布局。在页式媒体如打印输出中,一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果,但大都数效果不是通过CSS来实现了,而是应用了JS脚本。
请特别注意,IE6不支持CSS中的position:fixed属性。真的非常遗憾,要不然我们就可以试试这种酷酷的效果了。
◆position:relative 相对定位
所谓相对定位到底是什么意思呢,是基于哪里的相对呢?我们需要明确一个概念,相对定位是相对于元素默认的位置的定位。既然是相对的,我们就需要设置不同的值来声明定位在哪里,top、bottom、left、right四个数值配合,来明确元素的位置。
- a. 当定义border:none时,表示无边框样式,浏览器并不会对边框进行渲染,也就没有实际的宽度;
b .定义边框时,除了设置宽度外,还必须设置边框的样式才能显示出来。
CSS Sprites
在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。