CSS_LESS 語法/函數詳解

jopen 10年前發布 | 55K 次閱讀 CSS_LESS CSS 前端技術

嵌套規則

#header { color: black; }#header .navigation {  font-size: 12px;
}#header .logo { 
  width: 300px; 
}#header .logo:hover {  text-decoration: none;
}

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

變量:

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

偽類寫法:

a{
    color: red;
    &:hover{color:blue;}
    &:active{color:green;}
}

COLOR顏色函數:

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

 

DEMO_HTML:

谷歌/火狐瀏覽器適用,IE瀏覽器不兼容.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet/less" type="text/css" href="less/styles.less" />
    <script src="less-1.5.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="content">
        <div style="height:30px;color:#FFF;background-color:#000;">對照文本顏色</div>
        <h1>這里是標題啦</h1>
        <h2>內容標題文件</h2>
        <h3>再一種顏色</h3>
        <p>一種新顏色</p>
    </div>
<script>
    less.watch(); //自動刷新
</script>
</body>
</html>

 

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！