less構文の基礎
11193 ワード
導入less
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
stylesheet/less 変数＃ヘンスウ＃
変数宣言
@width:100px;
div{
width:@widht;
}
@width:100px
@width+100px ; 200px
@width*2; 200px
，LESS 。 root ， 。 ， ， id class ， ， ， —— 。
@color: #00c; /* */
#header {
@color: #c00; /* */
border: 1px solid @color; /* */
}
#footer {
border: 1px solid @color; /* */
}
宣言クラス(関数)
.myClass(@color:red,@length){
background-color:@color
width:@length;
height:@length;
border：1px solid @color
}
.myClass(@color:red ,@length:100px){
background-color:@color;
width:@length;
height:@length;
border：1px solid @color
}
.div1{
.myClass(grenn,200px);
}
.div1{
.myClass;
}
クラス宣言の拡張
.border(@a,@b,@color:blue){
border:@arguments;
}
.border(cool,@color){
border:2px solid @color;
}
.border(hot,@color){
border:1px solid @color
}
.border(@_,@ye){
color:@ye;
}
：
.con2{.border(hot,red)}
.con1{.border(cool,blue)}
：.con2(border:1px solid red;color:red)
.con1{border:2px solid blue;color:blue}
.border(@a){….}
.border(@a,@b){...}
， 2
.border(@a,@b,@color:blue){
border:@arguments;
}
.border(@a) when (@a>10),(@a<3){
border:@a solid blue;
}
.con1{.border(5px)}
10 3，
.border(@a) when (@a>10) and (@a<15){
border:@a solid blue;
}
.con1{.border(12px)}
10 15 ， ， px ，
.border(@a) {
border:unit(@a,px) solid red;
}
.con2{.border(5)}
.con2{border:5px solid red;}, unit(5px) 5
混合(Mixin)
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
}
セレクタ継承
.menu {
border: 1px solid #ddd;
}
.footer {
@extend .menu;
}
/* */
.menu, .footer {
border: 1px solid #ddd;
}
ネスト規則(Nested rules)
#site-body { …
.post { …
.post-header { …
h2 { … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}
， ， 。 & ， javascript this。
ネーミングスペース(namespaces)
#defaults {
.nav_list () {
list-style: none;
margin: 0; padding: 0;
}
.button () { … }
.quote () { … }
}
， ， nav ul ， default 。 ， 。
nav ul {
#defaults > .nav_list;
}
注釈
インポート
文字列の挿入
@base_url = 'http://coding.smashingmagazine.com';
background-image: url("@{base_url}/images/background.png");
エスケープ
.class {
filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}
/* : */
.class {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}
JAvascriptの式
@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */
/* You can also use the previously mentioned interpolation: */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */
/* Here we access part of the document */
@height = `document.body.clientHeight`;
LESS内蔵関数：
+ ceil(@number); //
+ floor(@number); //
+ percentage(@number); // ， 0.5 -> 50%
+ round(number, [places: 0]); //
+ saturate(@color, 10%); // 10%
+ desaturate(@color, 10%); // 10%
+ lighten(@color, 10%); // 10%
+ darken(@color, 10%); // 10%
+ fadein(@color, 10%); // 10%
+ fadeout(@color, 10%); // 10%
lessとsassの違い
， LESS 。 Sass， if{}else{} ， for{} ， and、or not， <、>、<=、>= == 。
/* Sass if */
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
/* Sass for */
@for $i from 1px to 10px {
.border-#{i} {
border: $i solid blue;
}
}
Sass 。 ， @color ， ， ， （ ）。
//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:1.5;
}
sass ， ， ，
//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}
， ， #{$variables} 。
//sass style
//-------------------------------
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
// class
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
//
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
//-------------------------------
.border-top{
border-top:1px solid #ccc;
}
body {
font: 12px/1.5;
}
list map ， list js ， map js 。
list
list ， ， nth($var,$index) 。 list length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator]) ， sass Functions（ List Functions ）
//
$px: 5px 10px 20px 30px;
// ， js
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
//sass style
//-------------------------------
$linkColor: #08c #333 !default;// ，
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
map
map key value ， value list。 ：$map: (key1: value1, key2: value2, key3: value3);。 map-get($map,$key) 。 map map-merge($map1,$map2)，map-keys($map)，map-values($map) ， sass Functions（ Map Functions ）
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
， border-width，border-color border 。 ：
//sass style
//-------------------------------
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
//css style
//-------------------------------
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
， ， 。
sass3.3.0 ， 。 ， ， 。
//sass style
//-------------------------------
//
.parent-1 {
color:#f00;
.child {
width:100px;
}
}
//
.parent-2 {
color:#f00;
@at-root .child {
width:200px;
}
}
//
.parent-3 {
background:#f00;
@at-root {
.child1 {
width:300px;
}
.child2 {
width:400px;
}
}
}
//css style
//-------------------------------
.parent-1 {
color: #f00;
}
.parent-1 .child {
width: 100px;
}
.parent-2 {
color: #f00;
}
.child {
width: 200px;
}
.parent-3 {
background: #f00;
}
.child1 {
width: 300px;
}
.child2 {
width: 400px;
}
変数宣言