less
付博瀚
学习ing
展开
-
less 学习-变量
很容易理解:@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出:#header { color: #6c94be; }甚至可以用变量名定义为变量:@fnord: "I am fnord.";@var: 'fnord';content: @@...原创 2018-08-09 17:45:57 · 881 阅读 · 1 评论 -
less学习——作用域
LESS 中的作用域跟其他编程语言非常类似,首先会从本地查找变量或者混合模块,如果没找到的话会去父级作用域中查找,直到找到为止.@var: red;#page { @var: white; #header { color: @var; // white }}#footer { color: @var; // red }...原创 2018-08-27 12:42:08 · 592 阅读 · 0 评论 -
less学习——命名空间
有时候,你可能为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover...原创 2018-08-27 12:40:39 · 221 阅读 · 0 评论 -
less学习——Color 函数
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:lighten(@color, 10%); // return a color which is 10% *lighter* than @colordarken(@color, 10%); // return a color which is 10% *darker* th...原创 2018-08-22 12:43:41 · 11446 阅读 · 0 评论 -
less学习——运算
任何数字、颜色或者变量都可以参与运算. 来看一组例子:@base: 5%;@filler: @base * 2;@other: @base + @filler;color: #888 / 4;background-color: @base-color + #111;height: 100% / 2 + @filler;LESS 的运算已经超出了我们的期望,它能够分辨出颜色和...原创 2018-08-22 12:40:31 · 2611 阅读 · 0 评论 -
less学习-嵌套规则
LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:#header { color: black; }#header .navigation { font-size: 12px;}#header .logo { width: 300px; }#header .logo:hover { text-decoration: none;}在 ...原创 2018-08-16 18:54:21 · 2559 阅读 · 1 评论 -
less学习-模式匹配和导引表达式(带参数混合2)
有些情况下,我们想根据传入的参数来改变混合的默认呈现,比如下面这个例子:.mixin (@s, @color) { ... }.class { .mixin(@switch, #888);}如果想让.mixin根据不同的@switch值而表现各异,如下这般设置:.mixin (dark, @color) { color: darken(@color, 10%);...原创 2018-08-14 08:54:55 · 1622 阅读 · 0 评论 -
less学习-带参数混合
在 LESS 中,你还可以像函数一样定义一个带参数的属性集合:.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius;}然后在其他class中像这样调用它:#header { .border-ra...原创 2018-08-14 08:49:35 · 3748 阅读 · 0 评论 -
less学习-混合
在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性. 下面有这样一个class:.bordered { border-top: dotted 1px black; border-bottom: solid 2px black;}那如果我们现在需要在其他class中引入那些通用的属性集,那么我们只需要在任何class中像下面这样...原创 2018-08-09 18:03:41 · 741 阅读 · 0 评论 -
less学习——注释
CSS 形式的注释在 LESS 中是依然保留的:/* Hello, I'm a CSS-style comment */.class { color: black }LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:// Hi, I'm a silent comment, I won't show up in your CSS.class { col...原创 2018-09-01 16:24:06 · 390 阅读 · 0 评论