前端學習之路---移動web開發（二）

接＝＝＝》移動ｗｅｂ開發（一）下一篇 node.js

less

Less環境安裝

安裝nodejs

在部分win8系統當中無法安裝

（解決辦法的是已管理者權限運作cmd然後再按寫指令切換到安裝包目錄，直接指令執行）

前端學習之路---移動web開發（二）

安裝完成nodejs之後

檢測是否安裝完成 node –v 檢視版本

然後檢測 npm是否自帶 npm –v 檢視版本

線上安裝

然後運作 npm install –g less (部分電腦要 sudo 管理權限)

前端學習之路---移動web開發（二）
Lessc –v 檢視版本是否安裝成功
學習less

[官網](http://lesscss.org/)

[中文網](http://lesscss.cn/) http://www.1024i.com/demo/less/

Webstrom 插件

Lessc less.less less.css 編譯less檔案成css
簡介

CSS（層疊樣式表）是一門曆史悠久的标記性語言，同 HTML 一道，被廣泛應用于網際網路（World Wide Web）中。HTML 主要負責文檔結構的定義，CSS 負責文檔表現形式或樣式的定義。

作為一門标記性語言，CSS 的文法相對簡單，對使用者的要求較低，但同時也帶來一些問題：CSS 需要書寫大量看似沒有邏輯的代碼，不友善維護及擴充，不利于複用，尤其對于非前端開發工程師來講，往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼，造成這些困難的很大原因源于 CSS 是一門非程式式語言，沒有變量、函數、SCOPE（作用域）等概念。LESS 為 Web 開發者帶來了福音，它在 CSS 的文法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，并且降低了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可以讓我們用更少的代碼做更多的事情。
LESS 原理及使用方式

本質上，LESS 包含一套自定義的文法及一個解析器，使用者根據這些文法定義自己的樣式規則，這些規則最終會通過解析器，編譯生成對應的 CSS 檔案。LESS 并沒有裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 文法的基礎上，為 CSS 加入程式式語言的特性。
文法

變量

Mixin混入

嵌套

Import

函數（内置函數運算）
變量

LESS 允許開發者自定義變量，變量可以在全局樣式中使用，變量使得樣式修改起來更加簡單。
```
/*-----------------變量-----------------*/
@mainColor:#E93223;
body{     
    color: @mainColor;
}
           
```
Mixin混入

Mixin（混入）功能對用開發者來說并不陌生，很多動态語言都支援 Mixin（混入）特性，它是多重繼承的一種實作，在 LESS 中，混入是指在一個 CLASS 中引入另外一個已經定義的 CLASS，就像在目前 CLASS 中增加一個屬性一樣。
```
/*-----------------mixin 混入----------------*/
/*顔色*/
.red{
  color: @mainColor;
}
.border{
  border: 1px solid #ccc;
}
.redBorder(){
  color: @mainColor;
  border: 1px solid #ccc;
}
.mixin-class{
  .red();
  .border();
}
.mixin-fuc{
  .redBorder();
}
           
```

嵌套

在我們書寫标準 CSS 的時候，遇到多層的元素嵌套這種情況時，我們要麼采用從外到内的選擇器嵌套定義，要麼采用給特定元素加 CLASS 或 ID 的方式

/*------------------嵌套------------------*/
/*輪播圖*/
#wjs_banner{
  .carousel-inner{
    > div.item{
      a.img_box{
        background: url("../images/slide_01_2000x410.jpg") no-repeat center center;
        height: 410px;
        /*調用redBorder mixin*/
        display: block;
        .redBorder();
        /*調用@mainColor 變量*/
        &:hover{
          color: @mainColor;
        }
      }
      a.img_mobile{
        width: 100%;
        display: block;
        img{
          width: 100%;
          display: block;
        }
      }
    }
  }
}

Import 導入

/*---------------------Import 引入------------------------*/
@import "base";
.f_left{
  float: @right;
}

運算及函數

在我們的 CSS 中充斥着大量的數值型的 value，比如 color、padding、margin 等，這些數值之間在某些情況下是有着一定關系的，那麼我們怎樣利用 LESS 來組織我們這些數值之間的關系呢？

http://www.1024i.com/demo/less/reference.html

escape(@string); // 通過 URL-encoding 編碼字元串
e(@string); // 對字元串轉義
%(@string, values...); // 格式化字元串
unit(@dimension, [@unit: ""]); // 移除或替換屬性值的機關
color(@string); // 将字元串解析為顔色值
data-uri([mimetype,] url); // * 将資源内嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将數字轉換為百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 計算數字的平方根
abs(number); // * 數字的絕對值
sin(number); // * sin函數
asin(number); // * arcsin函數
cos(number); // * cos函數
acos(number); // * arccos函數
tan(number); // * tan函數
atan(number); // * arctan函數
pi(); // * 傳回PI
pow(@base, @exponent); // * 傳回@base的@exponent次方
mod(number, number); // * 第一個參數對第二個參數取餘
convert(number, units); // * 在數字之間轉換
unit(number, units); // * 不轉換的情況下替換數字的機關
color(string); // 将字元串或者轉義後的值轉換成顔色
rgb(@r, @g, @b); // 轉換為顔色值
rgba(@r, @g, @b, @a); // 轉換為顔色值
argb(@color); // 建立 #AARRGGBB 格式的顔色值
hsl(@hue, @saturation, @lightness); // 建立顔色值
hsla(@hue, @saturation, @lightness, @alpha); // 建立顔色值
hsv(@hue, @saturation, @value); // 建立顔色值
hsva(@hue, @saturation, @value, @alpha); // 建立顔色值
hue(@color); // 從顔色值中提取 hue 值（色相）
saturation(@color); // 從顔色值中提取 saturation 值（飽和度）
lightness(@color); // 從顔色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 從顔色中提取 hue 值，以HSV色彩空間表示（色相）
hsvsaturation(@color); // * 從顔色中提取 saturation 值，以HSV色彩空間表示（飽和度）
hsvvalue(@color); // * 從顔色中提取 value 值，以HSV色彩空間表示（色調）
red(@color); // 從顔色值中提取 'red' 值（紅色）
green(@color); // 從顔色值中提取 'green' 值（綠色）
blue(@color); // 從顔色值中提取 'blue' 值（藍色）
alpha(@color); // 從顔色值中提取 'alpha' 值（透明度）
luma(@color); // 從顔色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 飽和度增加 10%
desaturate(@color, 10%); // 飽和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 設定透明度為 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合兩種顔色
greyscale(@color); // 完全移除飽和度，輸出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 輸出 @darkcolor，否則輸出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判斷一個值是否是顔色
isnumber(@numberOrAnything); // 判斷一個值是否是數字（可含機關）
isstring(@stringOrAnything); // 判斷一個值是否是字元串
iskeyword(@keywordOrAnything); // 判斷一個值是否是關鍵字
isurl(@urlOrAnything); // 判斷一個值是否是url
ispixel(@pixelOrAnything); // 判斷一個值是否是以px為機關的數值
ispercentage(@percentageOrAnything); // 判斷一個值是否是百分數
isem(@emOrAnything); // 判斷一個值是否是以em為機關的數值
isunit(@numberOrAnything, "rem"); // * 判斷一個值是否是指定機關的數值

例子

/*-------------------運算和函數--------------------------*/
@back:#333;
.test{
  border: 1px solid @back*2;
  background: lighten(#000, 10%);
  color:darken(#000, 10%);
}

Less在浏覽器上使用的方法

<link rel="stylesheet/less" type="text/css" href="styles.less" target="_blank" rel="external nofollow"  />
<script src="less.js" type="text/javascript"></script>

1.less無法在浏覽器端直接使用

2.浏覽器不識别

3.必須解析成css代碼

4.通過less解析插件（javascript）

5.引入less檔案需要加上 type="text/less"

6.less.watch(); 無重新整理預覽樣式

7.以http形式打開網頁預覽

rem-認識

<!DOCTYPE html>
<html  style="font-size: 50px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            line-height: 1;
            font-size: 50px;
        }
        .em{
            font-size: 2em;
        }
        .rem{
            font-size: 2rem;
        }
        /*1.rem是相對機關*/
        /*2.em大小是基于父元素的字型大小*/
        /*3.rem的大小是基于？？？*/
        /*4.浏覽器預設的字型大小是16px*/
        /*5. r 意思 root 根元素，html标簽 */
        /*6. rem的大小是基于html元素的字型大小*/

    </style>
</head>
<body>

<div class="em">AAAAA</div>
<div class="rem">AAAAA</div>

</body>
</html>

rem-适配

<html >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        /*假設的裝置  320px 414px 640px */
        @media (min-width: 320px) {
            html{
                font-size: 50px;
            }
        }
        @media (min-width: 414px) {
            html{
                font-size: 64.6875px;
            }
        }
        @media (min-width: 640px) {
            html{
                font-size: 100px;
            }
        }
        body{
            margin: 0;
            padding: 0;
            font-size: 14px;
        }
        /*流式容器*/
        header{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.32rem;
            text-align: center;
            background: green;
            color: #fff;
        }
    </style>
</head>
<body>
<!--1.伸縮布局   flex -->
<!--2.流式布局  百分比 -->
<!--3.響應布局  媒體查詢 （超小屏裝置的時候：流式布局）-->
<!--共同點：元素隻能做寬度的适配（排除圖檔）-->
<!--适配方案rem：寬度和高度都能做到适配（等比縮放）-->
<!--4.rem布局-->
<!--通過控制html上的字型大小去控制頁面上所有已rem為機關的基準值控制尺寸-->
<!--4.1 把頁面上px機關轉換成rem機關-->
<!--4.2 頁面制作的時候 psd 上的量取的px轉成rem使用-->
<!--4.3 怎麼換算？？？預設一個基準值 友善計算 100px -->
<!--4.4 适配的時候設定基準值  320px  50px 怎麼算：（640px 100px ===320px 50px）-->
<!--4.5 換算公式：目前rem基準值 = 預設的基準值 / 設計稿寬度 * 目前裝置的寬度 -->
<!--4.6 怎麼去改變 （js換算，媒體查詢推薦）-->
<header>購物車</header>
</body>
</html>

前端學習之路---移動web開發（二）

接＝＝＝》移動ｗｅｂ開發（一）下一篇 node.js

繼續閱讀

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

聊一聊Swagger-UI的那些事情軟體簡介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的更新版的UI

javascript console對象解讀

React中less的引用初窺

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

前端學習之路---移動web開發（二）

接＝＝＝》移動ｗｅｂ開發（一） 下一篇 node.js

繼續閱讀

接＝＝＝》移動ｗｅｂ開發（一）下一篇 node.js