LESS學習筆記（上）

HTML標記：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LESS-demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h3>這是一個標題</h3>
    <p class="p1">這是一段文字</p>
    <ul>
        <li class="list1 border">list1</li>
        <li class="list2">list2</li>
        <li class="list3">list3</li>
        <li class="list4 boxshadow">list4</li>
        <li class="list5">list5</li>
    </ul>
    <h4 class="h4">這是一個標題</h4>

    <div id="nested">
            <h1><a href="#">嵌套規則——Nested</a></h1>
            <p>less 嵌套規則實例</p>
    </div>
    <br>
    <div id="special" class="fr">
        <p class="green">這個段落的文字是綠色的</p>
    </div>
    <p class="p2">這個段落的class是p2</p>
    <p class="p3">這個段落的class是p3</p>
    <div class="button1">
        <a href="#">按鈕</a>
        <span class="button">模擬按鈕樣式</span>
    </div>

    <div class="scope">
        <h3>變量範圍</h3>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </div>

    <div class="extend">
        <ul>
            <li class="inline">列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
    </div>
</body>
</html>

1、變量——Variables 【定義變量用@前綴】

less編譯：

@charset "utf-8";
// 註釋：雙斜槓：單行註釋 css不解析
/*這種多行註釋，css會解析*/
body{
    background: #eee;
}

//注：在Less中的變量實際上就是一個“常量”，因爲它們只能被定義一次。
//1、變量——Variables 【定義變量用@前綴】
@color:#f00;
@fs14: 14px;

h3{
    color:@color;
    font-size: @fs14;
}

// 變量計算
@blue: #5b83ad;
@lightBlue: @blue + #111;

.p1{
    color:@lightBlue;
    //color:@blue;
}

//定義一個變量名爲變量
@red:#f00;
@newRed: "red";
.list1{
    color: @@newRed;
}

css輸出：

@charset "utf-8";
/*這種多行註釋，css會解析*/
body {
  background: #eee;
}
h3 {
  color: #ff0000;
  font-size: 14px;
}
.p1 {
  color: #6c94be;
}
.list1 {
  color: #ff0000;
}

//2、混入——Mixins

less編譯：

//混入其實就是一種嵌套，它充許你將一個類嵌入到另一個類中，而被嵌入的這個類也稱爲是一個變量。
//2、混入——Mixins
.border{
    border: 1px solid red;
}
.h4{
    .border;
}

//另外混入也像一個帶有參數的functions，如下在的例子：
.roundedCorners(@radius:5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

.list4{
    .border;
    //.roundedCorners;
    .roundedCorners(10px);
}

//@arguments。@arguments在Mixins中具是一個很特別的參數，當Mixins引用這個參數時，他將表示所有的變量
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
.h4{
    .boxShadow(2px,2px,3px,#f36);
}

css輸出：

.border {
  border: 1px solid red;
}
.h4 {
  border: 1px solid red;
}
.list4 {
  border: 1px solid red;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
.h4 {
  -moz-box-shadow: 2px 2px 3px #ff3366;
  -webkit-box-shadow: 2px 2px 3px #ff3366;
  box-shadow: 2px 2px 3px #ff3366;
}

3、嵌套規則——Nested Rules【後代選擇符&】

less編譯：

#nested{
    display: inline;
    float: left;
    h1{
        font-size: 26px;
        font-weight: bold;
        a{
            color: #f36;
            text-decoration: none;
            &:hover{
                color: #63f;
                text-decoration: underline;
            }
        }
    }
    p{
        font-size: 12px;
    }
}

// 在Less中嵌套書寫中有沒有&區別，有&時解析的是同一個元素或此元素的僞類，沒有&解析是後代元素
#special{
    &.fr{
        float: right;
    }
    .green{
        color: green;
    }
}

css輸出：

#nested {
  display: inline;
  float: left;
}
#nested h1 {
  font-size: 26px;
  font-weight: bold;
}
#nested h1 a {
  color: #f36;
  text-decoration: none;
}
#nested h1 a:hover {
  color: #63f;
  text-decoration: underline;
}
#nested p {
  font-size: 12px;
}
#special.fr {
  float: right;
}
#special .green {
  color: green;
}

4、Functions & Operations

less編譯：

// Operations主要是針對任何數字、顏色、變量的操作，可以對其是行加、減、、乘、除或者更復雜的綜合運算
// Functions主要是針對Color funtions，Less提供了多種變換顏色的功能
@base: 5%;
@filter: @base*2;
.nested p{
    color: #888 / 2;
    height: 100% / 2 + @filter;
}

@var: 1px + 1;          //“@var: 1px + 1”，Less最終解析的值是“2px”
.p2{
    clear: both;
    border: @var solid black;
    width: @var + 60 *3;
    height: (@var + 10) *4;
}

@num: 20px;
.p3{
   background: #fff;
    width: @num + 60 *3;
    height: (@num + 10) *4;
}

css輸出：

.nested p {
  color: #444444;
  height: 60%;
}
.p2 {
  clear: both;
  border: 2px solid #000000;
  width: 182px;
  height: 48px;
}
.p3 {
  background: #fff;
  width: 200px;
  height: 120px;
}

5、命名空間——Namespaces

less編譯：

#namespace{
    .button(){
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #000;
        color: blue;
        background: #ddd;
        text-decoration: none;
        &:hover{
            background: #fff;
        }
    }
}
.button1 a {
    #namespace > .button;
    color: orange;
}

.button{
    #namespace > .button;
    cursor: pointer;
}

css輸出：

.button1 a {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #000;
  color: blue;
  background: #ddd;
  text-decoration: none;
  color: orange;
}
.button1 a:hover {
  background: #fff;
}
.button {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #000;
  color: blue;
  background: #ddd;
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  background: #fff;
}

6、變量範圍——Scope

less編譯：

@color01: red;
.scope{
    margin-top: 10px;
    border-top: 1px solid #333;
    @color01: green;
    h3{
        color: @color01;
    }
}
.scope li{
    color: @color01;
}

css輸出：

.scope {
  margin-top: 10px;
  border-top: 1px solid #333;
}
.scope h3 {
  color: #008000;
}
.scope li {
  color: #ff0000;
}

7、extend是一個Less僞類，它會合並它所在的選擇其和它所匹配的引用。類似繼承

less編譯：

.extend li{
    margin: 10px 0;
    background: #ccc;
    &:extend(.inline);
}
.inline{
    color: blue;
}

css輸出：

.extend li {
  margin: 10px 0;
  background: #ccc;
}
.inline,
.extend li {
  color: blue;
}

未完待續......

LESS學習筆記（上）

Shell/Python中的用戶名獲取

JS基礎——數據類型

JS基礎——JS找到合適的值

JS基礎——自定義屬性2

檢測QQ號碼

JS模擬百度文庫評分

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結