今天在網上完成了less的基礎學習,下面是我的學習筆記。總共有三個檔案:index.html、main.less、mian.css,其中mian.css是main.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...