00:00
大家好,我是学习园地的特约导师高若峰,上节课呢,咱们学习了web pack打包CSS资源,那这节课呢,咱们要学习呃,另外的一个资源打包,就是用web pack打包lesss或SS这样的资源,那为什么要用lesss和SS资源,咱们都知道。咱们在写项目的时候呢,通常使用到的都是CSS,但是CSS咱们用的时候呢,有很多不方便的地方,因为CSS只是单纯属性的一个描述,它并不具有像变量啊,条件语句这样的一些特征。所以呢,我们用CSS来编写样式,但是它是主流可以编写,但是呢,导致我们在开发的时候难以维护,特别是大型项目的时候。这样的话我们用CSS就不方便了,你比如说呃,Bootw它呢,就看上去咱们用的都是CS对吧,用的那些类库,而实际上。Boop这些CSS都是使用less或者是用S编译出来的。
01:00
所以呢,我们在写大型项目的时候呢,我们通常呢,都会用S或者是light,这俩有什么区别呢,你可以看上去没什么区别呢,两种就是两种语言,他们呢都属于CSS处理器。那这种语言呢,我们在写页面的时候,咱们说了写页面三大,呃,三大特征什么呢。就是HTMLCSS和javascript,那就没有这两个对吧。所以说我们通过这两个是用它干嘛呢?是用它编译成CSS,所以叫做CS sa处理器,我们写的是lesss或者S,得编译成CSS,在页面上才能用。所以这个编译的工作,我们使用的包就是这个包。清楚了吧,是这样的一个。那他说了,为什么要编译成CSS,因为这两个里边,它们是相当于是一种编程语言的思想,里边可以使用变量,可以使用预算符,可以使用流程控制语句等等。所以呢,我们就能很方便的来生成我们的CSS,在页面里边用,你比如说。
02:00
啊。页面它都有一个通用的什么颜色背景,通用的一个颜色主体,那你在各个模块里边有可能都用到这个颜色,那你如果一个一个去使用,一个去改,那老板说了公司的整个的UI风格换主体颜色变化了,那你是不是要改很多东西啊,那如果你把颜色变成一个变量。那么我们只要改变一下这个变量,再重新编译生成一个CSS,那所有用到这个变量的那都使用这个颜色知道,那同样像页面的整体的宽度高度也都可以用变量来方式来去设置。所以这是我们在开发前端项目的时候使用S或者是S这样的一个好处。那知道这样的工作了,那我们就知道使用lesss和SAS这两个一样的,基本上一样用法,只是语言的风格是不同的啊,但加载风格方法全部都是相似的,我们一个一个来,比如先加载less,那它使用这个lesss的包去编译,那这个呢是呃loader使我们web pack使用的,通过web pack,通过这个loader把这个引入进来,引入到ipad,然后去编译我们的呃lights这样的一个文件,那我们需要下载这两包,那我们在这块下载一下。
03:10
NP mi、安卓安卓什么呢?Less和lesss model。这两个是依赖关系,因为他们都是在开发的时候用,那上线的时候已经变译成CSS,它就不用了,所以呢,我们安装一下,安装速度有点慢,那咱们就让他在安装的,那安装的同时呢,那我们来写一下我们的Les这样的一个文件,你比如说。啊,安装完了,那我们在这块建一个我们的文件,你看一下啊,建一个样式文件,样式文件呢,我们选择文件,这里边我们随便写lesss样式,那后缀名呢,它就是less这样的文件,你看less这样的一个文件,那里边呢和我们正常写。你比如说我们来个BOS2正常写是一样的,宽度200像素,高度200像素BCK加ND,背景颜色,比如说呃,我们来个GR,呃那个来个red红色,然后呢,前景颜色我们来个GR绿色随便写是一样的,那有的说那这个那你还用写lesss干嘛呀?那我们直接写CSS不一样吗?
04:12
但是呢,我们可以把这些值你换成变量啊,比如说。啊,我就说明一个let声明变量是用I弧这块宽度,当然具体的咱不是讲less和S,具体的语法你看一下语法比较简单,比学S语法简单多了。然后比如宽度,我们进行成200。像素,然后艾特高度,我们定义成200像素。那我们再定义成一个颜色吧。我们随便定一个颜色,我们来一个red红色的,你看我们生成了三个变量,那在这里边呢,我们使用的时候就不直接写值了,我们直接用这个变量,当然也可以大括号里面生成局部变量之类的啊,都是这样的,你看宽度高度呢,我们这块也用一个变量。高度,然后颜色这块我们。这边一个变量,用变量color这就可以了,对吧,但是这种语法我们能直接在RTM用啊,你看我们在RTM里边,如果我们打包加载上来了,把这个拿过来。
05:09
这个是CS这块呢,我们是这这块是报。你看。那CSS我们能直接用对吧?那less我们不能直接用,得把它翻译成什么,得把它翻译成CSS才可以用,那怎么个翻译过程呢?那比如说我们在这里边得先将它导入为块。你得导入到什么,得从入口文件导入,打包的时候才打包的时候才能翻译,对不对,那我们导入这个。Nice的英文件。那这样的话,我们外派D1编译的时候就可以导入了吗?不行,那么我们得在这里边加规则,因为CSS都不能直接打包呢,何况是什么,何况是这个lesss这个文件对不对?所以呢,我们在这里边同样得复制一下这两条了,这会我们就得用什么逗号隔开,一样是从右右到左的,那解析的文件就是结尾是less的名字的,Less的这个结尾的名称别忘了给改掉啊,这样的话我们就翻译后缀名是lesss的。
06:10
那这两个先放在这在,因为它是从右到左执行的,后边加一个loud,加一个什么loud呢,叫做less。为什么前面两个要留着,而不能直接写这一个?它的顺序是这样的,从右到左执行,先通过它将后缀名是less的这个文件。也就是这个文件,先把把帮我们把这个文件里面内容转成CSS。所以要知道这个作用,帮我们把less文件的内容转成CSS,转成CSS之后通过CSSLA把它加到我们的什么talk里边去。也就加到我们的,相当于加到我们的,打包到我们GS里边去,然后还是通过style loader将我们这个GS里边的GSS,再以头的方,再在那个hi的头里边插入style标签,把样放到带标签里边就可用了。
07:05
所以这两个也要使用,并且呢放到前面。要知道这样的顺序好,不能说我们编译运行下。我把这个去掉。重新编一下。Pack。外派。如果没有错误成功对吧。509毫秒那就成功了,然后我们看这里边还是这几个文件,那我们一个看一下,在这个方法里边,已经将我们将样式这个文件给我们打包进来了,也将我们的什么也将我们的。对,你看这个文件它是从下划线执行的嘛,对吧,也将我们这个呃,样式这个也打包进来了,并且呢,也转成了什么CSS代码了,那我们来看一下运行一下它。运行一下,你看效果有没有效果啊,你看绿色的红色的这样的背景是不是都有了,然后我们看F12。
08:03
看给我们在头里边。在头里面你看一下。这里边有两个,一个是boss,这个原来的原生的CSS,一个是什么。Style boss2,你看给我们转成了这样的CSS,然后给我们插入头中了,是这样的一个过程啊。所以这就是我们Les打包的,那同样我们这里边还有一个跟它一样的SS打包的,那同样它用到的SS,这个是用这个包和这个包对吧,这两个道理是一样的,它相当于。把我们这个SARS编译成CSS,那这个呢,也相当于打包的一个loader,翻译的一个loader,那我们同样在这里边,我们需要怎么样下载这两包,还是NNP,请进下NP mi install安装一下,然后note。No里面萨SAS,然后再装一个SSA。然后也是在开发中安装。
09:00
安装了,咱们接着写这个文件,那同样要翻译成这个文件的话,那我们得在这里边再复制一行。复制一行。那我们这块用的louder就不是什么,就不是这个less loader了,而是什么。Loud sa loud是使用这个去完成的。那同样。后缀名是什么?Sass,但是这块千万要记住,我们这里边用到的后缀名,这个sa后缀有两种,一个是SAS,一个是SCSS,其实SAS这个S它使用的后缀名是SS啊,这不是容易误区的地方。所以呢,咱们写后缀名是SCSS呢,通过它对吧,转换,然后通过它打包请talk,然后通过它加到我们RM文件里面去。跟上面的原理是一样的,只不过这里边注意是SCSS,那既然是SSCSS,那我们同样在SS里边,我们新建一个。那么新建一个样式文件,那我们就得选择SSCSS这样的文件,而不是SSS文件啊,这块是呃容易出错的地方,我们叫做呃,Style样式S,嗯,Ass,然后后缀名你看是点SCSS,那同样我们在这里边也可以用什么,也可以使用我们这样的变量,那我们这块就做一个BOX3。
10:22
再换一个写这样的一个样式,BOX3,那在BOXS3里边呢,那我们这里边在SS里边生命变量不是用艾符了,而是什么高符,记着它俩是有区别的,毕竟是两种语言嘛,所以呢,它是有区别的宽度,比如说我们这块写上100像素,然后也是高幅高度。He GT高度100像素,然后我们在这里边使用什么呢?在这里边我们直接用上这个。宽度。呃,这块当然用的时候也是用什么,也是用这个,呃刀弧,当然假如说我这里边随便不写,直接写变量也可以,这里边可以用运算符,比如说乘以三宽度要的乘以三,然后高度。
11:04
这块咱们要这个变量he IG,这块我们也让它乘以乘以三。对吧,或者这块乘以二都行。就无所谓了,意思是在这里边可以用运算,它也能运算完的结果,给我们翻译成CSS对不对?然后B可加背景颜色,比如说yellow。录吧。Blue,然后前景颜色我们是yellow,随便写一个,当然这都可以用作变量啊,你可以运算符,可以用变量,这就什么?呃,SS的写法,当然这个SARS写完文件,我们需要在哪呢?我们需要在主入口里边也是把它整个。得包含进来,我们才能够把它打包在一起,你不包含的话,不会把包进来,对不对。这样的文件,然后呢,我们可以在页面里边应用,你不应你不应用的话,他也会插入这个页面对不对,那我们这块再复制一下。这块BOX3这块是SAS文件SAS啊。我们讲了,我们,嗯,我看一下。
12:03
看一下这个文件,好都没问题。编一下,打包一下S充电没有外。派来运行一下。好,没问题,没问题之后,那我们同样。在这里边。不能运行这个,得运行这个,因为这是打包后的文件,对吧,这是打包的文件,那我们运行一下看效果,你看蓝色的黄色字是不是可以吧,对吧?然后我们看F12,你看同样给我们打包到头里边了,在这块这是包12的,那你看下边这块多了一个对吧。高三的你看给我们变成了三百二百对吧,那变量相乘的翻译成了CSS,然后csi又在页面的引用,那在这里边去使用,出现了这个效果,这就是呃,我们。这个结果。打包nice和资源。好,这节课我们就讲到这里。
我来说两句