LESS學習筆記 入門

2021-06-27 06:26:03 字數 2884 閱讀 8716

今天在網上完成了less的基礎學習,下面是我的學習筆記。總共有三個檔案:index.html、main.less、mian.css,其中mian.cssmain.less經過koala編譯之後自動生成的。下面是**:

——index.html

——mian.less

@charset "utf-8";

body

div.clear

/*一、注釋

*注釋有2中

*//*第一種注釋,會顯示在編譯後的css檔案中*/

//第二種注釋,不會顯示在編譯後的css檔案中

/*二、變數

*先定義後使用,格式為 @name:value

*注意name應遵循基本的變數名規則,value要帶上單位

*///定義

@width_200:200px;

@height_300:100px;

//使用

.div1

/*三、混合

*1.直接引用某個類的所有屬性

*2.引用帶引數無預設值的類屬性

*3.引用帶引數有預設值的類屬性

*/ //混合 1

.box

.border

.box1

//混合 2 帶引數無預設值

.border2(@border_width)

.box2

//混合 3 帶引數有預設值

.border3(@border_width:7px,@bstyle:solid)

.box3_1

.box3_2

//demo 圓角

.border_radius(@radius:5px)

.radius_test1

.radius_test2

/*四、匹配模式 */

//應用背景:三角

.sanjiao_demo

匹配模式下寫三角

.sanjiao(top,@w:5px,@c:#f00)

.sanjiao(bottom,@w:5px,@c:#f00)

.sanjiao(@_,@w:5px,@c:#f00)

.sanjiao_t1

.sanjiao_t2

匹配模式 - 定位

.pos(r)

.pos(a)

.pos(f)

.pipei

/*五、運算

!!!【加減】運算子與前乙個變數之間有空格,否則出錯

*/@abase:300px;

.box4

/*六、巢狀規則*/

/*一般的寫ul li a 的方式

.list{}

.list li {}

.list a {}

.list a:hover {}

.list span{}

*/.list

a }span

}/*七、@arguments變數

@arguments代表形參中的所有引數

*/.border_arg(@w:30px,@c:red,@sty:solid)

/*八、避免編譯和important

在使用less中,可能用到一些非正規或者不需要計算的內容時,前面加~符號

*/ 避免編譯

.test_no1

.test_no2

important,為所有引用的屬性加上important

.test_important

——main.css

@charset "utf-8";

body

div

.clear

/*一、注釋

*注釋有2中

*//*第一種注釋,會顯示在編譯後的css檔案中*/

/*二、變數

*先定義後使用,格式為 @name:value

*注意name應遵循基本的變數名規則,value要帶上單位

*/.div1

/*三、混合

*1.直接引用某個類的所有屬性

*2.引用帶引數無預設值的類屬性

*3.引用帶引數有預設值的類屬性

*/.box

.border

.box1

.box2

.box3_1

.box3_2

.radius_test1

.radius_test2

/*四、匹配模式 */

.sanjiao_demo

.sanjiao_t1

.sanjiao_t2

.pipei

/*五、運算

!!!【加減】運算子與前乙個變數之間有空格,否則出錯

*/.box4

/*六、巢狀規則*/

/*一般的寫ul li a 的方式

.list{}

.list li {}

.list a {}

.list a:hover {}

.list span{}

*/.list

.list li

.list a

.list a:hover

.list span

/*七、@arguments變數

@arguments代表形參中的所有引數

*//*八、避免編譯和important

在使用less中,可能用到一些非正規或者不需要計算的內容時,前面加~符號

*/.test_no1

.test_no2

.test_important

Yii學習筆記(入門)

use yii db activerecord class a extends activerecord hello,i am only page.1 初始化應用 訪問http localhost basic web index.php,進入yii的啟動頁面。如果提示你未安裝openssl的話,去你...

hightopo學習筆記 入門

ht是基於html5標準的企業應用圖形介面一站式解決方案,其包含通用元件 拓撲元件和3d渲染引擎等豐富的圖形介面開發類庫,提供了完全基於html5的向量編輯器 拓撲編輯器及 3d場景編輯器等多套視覺化設計工具,和完善的類庫開發手冊 工具使用手冊 及針對html5技術如何進行大規模團隊開發的客戶深度培...

Angular JS 學習筆記(入門)

實習的第乙個專案,是angularjs。angular可是公升級到angular8了啊.angular router 新增了向後相容模式,以降低大型專案的公升級成本。angular router 可以使用 route apis 延遲載入部分 angularjs 應用程式,從而更容易地公升級到 ang...