当前位置: 首页>前端>正文

什么情况下less变成less huge less是什么形式

  Vue-less:

一:简介:

  Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档(中文版),包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

cnpm install -g less lessc -version

 

二:创建:

需要一个调试工具js:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

并且导入less格式的css文件的时候必须写成这样子:
<link rel="stylesheet/less" type="text/css" href="styles.less" />

 

三:变量:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();//这里括号是可以去掉的
}

.post a {
  color: red;
  .bordered();
}

 

四:嵌套:nesting

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

 

五:混合再使用:

.xk(){
    width:200px;
    height: 500px;
}

.box{
    .xk();
    background-color: @main-color;
}

.locButton(@bgcolor){
    .xk;
    background-color: @bgcolor;
}

.redButton{
    .locButton(@main-color);
    text-align: center;
    line-height: 100px;
}

 

六:@规则嵌套和冒泡:

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

注意:记得回去再看看@media响应式布局,此处直接把@media使用函数嵌套的形式和min/max的方式响应

 

7.自动拼接小技巧:arguments

.borderStyle(@width:10px,@style:solid,@color:silver){
    border:@arguments;
}

.lcbox{
    .borderStyle();
}

.bigboc{
    .borderStyle(20px,dash)
}

 

函数(Functions)

Less 函数手册中有详细介绍。

  函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%,将颜色饱和度增加 5%,以及颜色亮度降低 25% 并且色相值增加 8 等用法:

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

参见:函数手册

 

命名空间和访问符

#bundle 之下,为了以后方便重用或分发:

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

 

.button#header a 中,我们可以这样做:

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

  注意:如果不希望它们出现在输出的 CSS 中,例如 #bundle .tab,请将 ()#bundle())后面。

映射(Maps)

  从 Less 3.5 版本开始,你还可以将混合(mixins)和规则集(rulesets)作为一组值的映射(map)使用。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

 

  输出符合预期:

.button {
  color: blue;
  border: 1px solid green;
}

 

参见: 映射(Maps)

作用域(Scope)

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

 

与 CSS 自定义属性一样,混合(mixin)和变量的定义不必在引用之前事先定义。因此,下面的 Less 代码示例和上面的代码示例是相同的:

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

参见:懒加载

注释(Comments)

块注释和行注释都可以使用:

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了!
@var: white;

导入(Importing)

“导入”的工作方式和你预期的一样。你可以导入一个 .less.less 扩展名,则可以将扩展名省略掉:

@import "library"; // library.less
@import "typo.css";

了解更多关于导入(Importing)的知识



https://www.xamrdz.com/web/2dq1938800.html

相关文章: