less网站 lesscss.cn

saaa网站 www.runoob.com/sass/sass-e…

2.学习预处理语言！！！

2.1 less语言

将less文件转换成css 文件的工具怎么进行下载安装！！！ 1）安装Nodejs 安装完毕之后，要测试是否安装ok？ node -v 或者 npm -v （来安装一些工具） 2）npm install less -g (global) 注意安装完毕之后，会在cmd窗口中可以使用lessc

步骤如下 打开cmd窗口

 1) node -v
 2) npm config set registry https://registry.npm.taobao.org --先修改下载地址
 3) npm install less -g --下载文件
 4）lessc -v --查看版本
 5）d:
 6）cd D:\less\code\ --目录路径 不是文件路径
 7）ls --路径中的文件

2.2 将less实时转换成css文件

koala-app.com/index-zh.ht…

2.3less 语法

1变量 变量：定义一个变量 将变量加到应用中

新建一个文件名为 01-变量.less 的文件
//定义变量
 @color:#e9232c;
 #header{
//使用变量
color:@color;
}
div{
 //使用变量
color: @color;
}
cmd中输出 lessc 01-变量.less 01-变量.css --01-变量.css 是转换成css样式的文件名

2混入 混入：新建的一个类 将类加到应用中

新建一个文件名为 02-变量.less 的文件
.temp{
border-top: 1px solid red;
border-bottom: 1px solid blue;
}
#header{
color: rebeccapurple;
.temp;
}
div {
background-color: saddlebrown;
.temp;
}
 cmd中输出 lessc 02-混入.less 02-混入.css --02-混入.css 是转换成css样式的文件名

3 带参数的混入 .border-radius(@radius){ ...} 还存在

 .border-radius(@radius){
border-radius: @radius;
-moz-border-radius:@radius ;
-webkit-border-radius:@radius;
}
div{background: red;
.border-radius(4px); --4px 替换变量 @radius
}
div .home{
.border-radius(10px); --10px 替换变量 @radius
}
cmd 新建 输出样式同上 文件名与上不同

4嵌套

      #footer{
color: red;
>ul{
    font-size: 20px;
    li{
        a{

        }
       // &代表父辈本身
        &:hover{
            color: #e9232c;
        }
    }
}
 }
 cmd 新建 输出样式同上 文件名与上不同 #footer > ul li:hover {
 color: #e9232c;
 }

5 运算

     @width:300px;
 div {
 width: @width;
 height: @width / 2; -- 高为自定义变量的一半150px
 }
 cmd 新建 输出样式同上 文件名与上不同

6 内置函数

   @color:#e9232c;
 div{
 color: lighten(@color,10%);
 }
 cmd 新建 输出样式同上 文件名与上不同

7 import 将import.less文件样式链接并应用到该文件中

 @import "./import.less"; --链接import.less


 .home{
   color:@color;
 }
 cmd 新建 输出样式同上 文件名与上不同

sass 语言

 步骤
 npm install sass -g --下载文件
 sass --version--查看版本
 d:
 cd D:\less\sass\code\ --目录路径 不是文件路径
 ls --路径中的文件
新建文件名为 xxx.scss  --文件名后缀必须是scss 不是sass

变量 打开cmd窗口

   $color:#e9232c;

 div{
 color:$color;
 }
 cmd窗口输出sass 01-变量.scss 01-变量.css

作用域

    $mycolor:red;

 div{
 $mycolor:black;
color: $mycolor;
}
cmd窗口输出sass 02-作用域.scss 02-作用域.css

全局

 $mycolor:red;

  h1{
 $mycolor:green !global;
 color:$mycolor;

}

p{
color:$mycolor;
}
输出与less相同样式

嵌套

   #header{
 font-size: 20px;
 ul{
   li{
 a{
  &:hover{
  color: red;;
 }
 }
 }
 }
 } 
 输出与less相同样式

import 将import.scss文件样式链接并应用到该文件中

     @import "reset.scss";

 div {
 color: red;
 }
 输出与less相同样式

混入 @mixin "name" @include "name"

  @mixin important-text{
  color: red;
 font-size: 25px;
 }
 div{
 @include important-text;
 }
 输出与less相同样式

带参数混入 @mixin border($radius){...}不存在

  @mixin border($radius){
   border-radius: $radius;
 -moz-border-radius:$radius ;
 -webkit-border-radius:$radius;
   }
 #header{
 @include border(10px);
 }
 输出与less相同样式

继承

  .button-basic{
 border: 1px solid red;
 padding: 10px;
 }
.button-success{
 @extend .button-basic;
 color: green;
 }
 .button-error{
 @extend .button-basic;
 color: red;
 }
 输出与less相同样式