node，sass，less，的安装与使用，css混合器，继承，计算，rem,em,px区别

分类

• jquery
• css3 html5
• php+mysql+
• angular.js
• react.js
• 微信小程序
• node.js 全栈开发

前段了解

云工程师 后台代码 数据存储 检索 计算
|
|网络
|
端工程师 移动端 pc端口 pad 可穿戴 ATM 嵌入式 VR模拟现实 AR增强现实 ipone android

前端

响应式设计(一套代码，在不同的端有不同的呈现方式)

.a{
	color:red;
	box-shadow:10px;
	动起来：滑动轮播；
}

css3(一套新的给浏览器指定的规范)

响应式设计				@media
引入一些炫酷web字体		@font-face
不依赖js做动画			animation
让以前方正的DOM变形		transform
3D效果					perspective
新的布局规范				display：flex

学习网址

https://nate-river.github.io/css3
https://nate-river.github.io/blog
https://nodejs.org

学习css3的工具

• sass (node-sass是sass的一个编译工具)

• sass是一种css预编译系统

  -less -stylus -sass

安装node.hs.msi软件

1. 下载安装node.js.msi 安装到c:

2. win+r 弹出窗口输入cmd 回车

3. node -v(验证node.js是否安装成功，要重启cmd)

4. npm install -g cnpm(安装软件cnpm)

5. cnpm -v

6. cnpm install -g node-sass(安装软件node-sass)

7. node-sass -v(验证node-sass是否安装成功)

8. 创建一个index.scss
   (F：哪个盘就是首字母大写)回车

9. 在cmd中输入 cd 托入index.scss所在的文件夹

10. node-sass index.scss index.css

11. 方向键上可以运行上次的命令

sass的监听命令：--watch可以随时监听scss文件的变化。

如：sass --watch style.scss:../css/style.css
也可以这样sass --style --watch style.scss:../css/style.css
②sass的文件有2种：.sass文件和.scss文件
.sass文件：缩进语法，不含符号{ }和；
.scss文件：和css语法相似

sass函数(适配手机)

$device-list:320px,365px,360px,412px,414px,750px;
html{
@each $device in $device-list{
@media screen and(min-width:#{$device}){
font-size:100 * ($device/750);
}
}
}

scss的用法：

一、定义变量与引用

$color: #f00;
$a-color: #ff0;
$b_color: #009;

.btn {
  width: 30px;
  height: 20px;
  color: $color;
  border-radius: 5px;
  border: none;
  display: inline-block;
}

二、嵌套css

伪类选择器嵌套需要注意
群组选择器的嵌套
同层相邻选择器
子元素 >
~ 同层全体组合选择器
.div {
color: #f8f8f8;
span {
display: block;
font-size: 14px;
}
a {
color: #ddd;
&:hover {
color: #f00;
}
}
h2,h3,h4 {
font-weight: normal;
}
}

三、注释方式

这个注释不会出现在css中，

//这是注释

这个注册会出现在css中

/* 这里是注释 */

四、混合器

• 混合器可以传递参数：

• @mixin rounded-corners($px) {
      -moz-border-radius: $px;
      -webkit-border-radius: $px;
      border-radius: $px;
    }
    
    .div {
      @include rounded-corners;
    }

五、继承

a {
  display: block;
}
.disabled {
  color: gray;
  @extend a;
}

六、计算

计算的使用，主要用在写移动端自适应的时候
1、首先计算移动客户端屏幕宽度，将document的font-size设置为px

(function init(){
  var fontSize = document.documentElement.clientWidth;
  document.body.parentNode.style.fontSize = fontSize +'px';
})()

2、利用1rem为html的fontsize的大小

// 设计图是750px的话
$basePx:750;
@function pxCount($px){
  @return $px/$basePx+rem;
}

.div {
  width: pxCount(18);
}

rem em px区别

• rem em 常见于自适应页面的尺寸，浏览器会根据页面转化成像素值；

• 1rem 为html中fontsize的值

• em 它们是相对于使用em单位的元素的字体大小。由于继承的存在，em很多时候会显示成相对于父元素的大小。

• px 物理像素