學習less筆記（一）

時間 2019-12-01

標籤學習筆記简体版

原文原文鏈接

簡單介紹less及工具介紹

1. less是什麼？

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS更易維護和擴展。 Less 能夠運行在 Node 或瀏覽器端。css

2. 參考資料

less中文官網：lesscss.cn/html

bootstrap的less教程： www.bootcss.com/p/lesscss/bootstrap

w3c：www.w3cschool.cn/less/瀏覽器

3. 編譯工具

koala官網： koala-app.com/app

在線編譯：www.w3cschool.cn/tools/index… 在線編譯太多了就不一一舉例了。less

爲何會用到編譯器

由於你所編寫的less文件瀏覽器識別不了，須要用到編譯器轉換成正常的css。
複製代碼

less的編寫規則

1. 註釋

以 // 開頭的註釋不會被編譯到css文件中。koa

以 /**/ 包裹的註釋會被編譯到css文件中。函數

2. less中的變量

用@聲明變量 @color:red;工具

1.普通的屬性值用@color   
例子
      #app {
      color:@color
      }
編譯後
      #app {
      color:red
      }
複製代碼

2.（不經常使用）屬性名稱@m:margin; 
 例子
        * {
        @{m}:0
        }
編譯後
        * {
        margin:0
        }
複製代碼

3. （不經常使用）選擇器@selector:#app;
例子
        @{selector}:{
            color:red
        }
編譯後
        #app:{
             color:red
        }
複製代碼

4.變量可用於保存圖片的URL、默認值、拼接 #app_變量、 +-*/ 等。
複製代碼

3. less中的嵌套

<html>
<head>
   <title>標題</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="container">
   <h1>我是h1</h1>
   <p class="myclass">我是p標籤.</p>
</body>
</html>
複製代碼

less 代碼spa

.container{
  h1{
  font-size: 25px;
  color:#E45456;
 }
  p{
       font-size: 25px;
       color:#3C7949;
  }

 .myclass{
  h1{
        font-size: 25px;
        color:#E45456;
  }
  p{
       font-size: 25px;
       color:#3C7949;
  }
 }
}
複製代碼

編譯後
.container h1 {
  font-size: 25px;
  color: #E45456;
}
.container p {
  font-size: 25px;
  color: #3C7949;
}
.container .myclass h1 {
  font-size: 25px;
  color: #E45456;
}
.container .myclass p {
  font-size: 25px;
  color: #3C7949;
}
複製代碼

4. less中命名空間和訪問器

less 代碼

.class1 {
  .class2 {
    .val(@param) {
      font-size: @param;
      color:green;
    }
  }
}

.myclass {
  .class1 > .class2 > .val(20px);
}
複製代碼

編譯後
.myclass {
  font-size: 20px;
  color: green;
}
複製代碼

5. less中做用域

less 代碼

@var: @a;
@a: 15px;

.myclass {
  font-size: @var;
  @a:20px;
  color: green;
}
複製代碼

編譯後
.myclass {
  font-size: 20px;
  color: green;
}
複製代碼

6. less父選擇器

less 代碼

a {
  color: #5882FA;
  &:hover {
    background-color: #A9F5F2;
  }
}
複製代碼

編譯後
a {
  color: #5882FA;
}
a:hover {
  background-color: red;
}
複製代碼

7. less循環

less 代碼

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}
複製代碼

編譯後
div {
  width: 25px;
  width: 50px;
  width: 75px;
  width: 100px;
  width: 125px;
  width: 150px;
  width: 175px;
}
複製代碼

8. less混合

less 代碼

.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}
.p3{
   background : #DAA520;
  .p1;
}
複製代碼

編譯後
.p1 {
  color: red;
}
.p2 {
  background: #64d9c0;
  color: red;
}
.p3 {
  background: #DAA520;
  color: red;
}
複製代碼

9. less混合參數

less 代碼

.border(@width; @style; @color) {
    border: @width @style @color;
}

.myheader {
    .border(2px; dashed; green);
}
複製代碼

編譯後
.myheader {
    border(2px; dashed; green);
}
複製代碼

靈活導入拓展性強，混合參數能夠寫默認值 @width; @style; @color：red

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。