LESS----CSS预处理语言

<html><head><meta charset="utf-8"><title>LESS----CSS预处理语言</title><meta name="keyword" content="LESS----CSS预处理语言"><meta name="discription" content="LESS----CSS预处理语言"><style>/* Less(Leaner Style Sheets的缩写)是一门向后兼容的CSS扩展语言. *//*  1 变量 */@sky-blue: #5DADBF;header {color: @sky-blue;}/*  2 混合 */.bordered {border: 1px solid red;}.box {.bordered;}/*  3 嵌套 */#head {.left-logo {}.right-msg {}&:after {}}.component {width: 300px;@media (min-width: 768px) {width: 600px;@media (min-resolution: 192dpi) {background-image: url(/img/bg.png);}}@media (min-width: 1280px) {width: 800px;}}/* 4 运算 */@len: 20mm+6cm; //8cm@color: #ccc/2;/* 5 calc特例 *//* 为了与css保持兼容,calc()并不对数学表达式进行结算,但是在嵌套函数中会计算变量和数学公式的值. */@var: 50vh/2;with: calc(50%+(@var -20px));/* 还是该表达式   *//*6 Escaping ~ *//* ~符号可以使用随意的字符串作为属性或者字符串,~符号内部内容除了插值没有任何改变 */@min768: ~"(min-width: 768px)";.element {@media @min768 {font-size: 1.2rem;}}@media (min-width: 768px) {.element {font-size: 1.2rem;}}/* 7 函数 */@base: #f04615;@width: 0.5;.class {width: percentage(@width); // returns `50%`color: saturate(@base, 5%);background-color: spin(lighten(@base, 25%), 8);}/* 8 Namespaces and Accessors *//* 有时候，你可能想要将你的mixin分组，或为了组织目的或者只是提供一些封装。 您可以在Less中很直观地做到这一点。您想要在#bundle下捆绑一些mixin和变量，以便以后重用或分发： */#bundle() {.button {display: block;border: 1px solid black;background-color: grey;&:hover {background-color: white}}.tab {...}.citation {...}}#header a {color: orange;#bundle>.button;/* 等价于#bundle.button */}/* 9 作用域（Scope） *//* Less中的范围与编程语言非常相似。 变量和mixin首先在本地查找，如果找不到，编译器将查找父范围，依此类推。 */@var: red;#page {@var: white;#header {color: @var; /*  white */}}/* Mixin和变量定义不必放在引用它们的行之前。 所以下面的Less代码和前面的例子是一样的： */@var: red;#page {#header {color: @var; /*  white */}@var: white;}/* 10 注释(comments) *//* 一个块注释* style comment! */@var: red; // 这一行被注释掉了！@var: white;/* 10 导入 (inporting) */@import "main";@import "head.css";</style>
</head><body><script></script>
</body>

转载于:https://www.cnblogs.com/SunlikeLWL/p/8780562.html

LESS----CSS预处理语言相关推荐

Less：CSS预处理语言快速入门以及浏览器中使用
Less css预处理语言特性:变量.继承.运算.函数 http://lesscss.cn/ 编译器 1.koala http://koala-app.com/index-zh.html https ...
CSS预处理——LESS
LESS是什么? less是一门CSS预处理语言.由于CSS本身并不是程序式语言,不方便维护和扩展,没有变量.函数.作用域等概念.而LESS在CSS的基础语法之上,引入了变量.Mixin混入.运算以及 ...
JavaScript基础学习——CSS预处理Less
一.CSS预处理目前CSS预处理语言主要有:Less,SASS,Stylus等.浏览器不能编译.less/.scss/.sass/.styl等文件,在html文件引入前面这些样式文件,必须先编译成. ...
丁鹿学堂：css预处理器之less学习（一）
less介绍 less是比较好用的css预处理语言. less增加了很多好用的新特性. 常用的有变量,混入,嵌套,计算等我们要注意的是,less不管是在服务器还是在浏览器中,都不能直接被使用,而是要 ...
CSS 与其预处理语言 Sass、Less、Stylus 之间的转化
预处理语言的由来:CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,为了让 CSS 富有逻辑性,短板不那么严重,涌现出了 ...
CSS预处理器之Sass与Less
本篇内容主要讲述css预编译器sass与less: Sass sass(Syntactically Awesome Stylesheets)是css预处理器,可帮助开发人员复用css代码开发,节省开发 ...
css预处理全部知识点一文讲清楚
css预处理一.什么是css预处理 css预处理器是一种新的编程语言,为css增加一些编程的特性,无需考虑兼容性问题.CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码,随后经过专门的编 ...
CSS预处理框架——Stylus
目录内容介绍一.特征二.选择器(Selectors) 1.缩排 :book: 2.规则集 3.父级引用 4.消除歧义三.变量(Variables) 1.变量 :mag: ...
rem和em学习笔记及CSS预处理
rem和em学习笔记及CSS预处理 1.当元素A的字体单位是n rem时,它将根据根元素(html)的font-size的大小作为基准,比如 View Code parent-div中的em-div ...

LESS----CSS预处理语言

LESS----CSS预处理语言相关推荐

最新文章

热门文章