- Learning Less.js
- Alex Libby
- 371字
- 2021-09-03 09:38:09
Compiling the code and viewing results
Now that we've seen something of the syntax of Less, let's change tack and focus on how to compile our Less styles to produce valid CSS. There are several ways to achieve this, of which we touched on some back in Chapter 2, Building a Less Development Toolkit. For the moment, we're going to concentrate on using Crunch! to compile our code; we will switch to using the command line later in this section.
Using a standalone compiler
We will start with the variable example shown earlier in this chapter. Let's begin by starting up Crunch! and then clicking on the New LESS file button in the main code window. By default, it will create a new placeholder file called new.less
; paste in the code from our example.
Press Ctrl + S to save the file, then save it in the lessjs
project folder we created earlier, as variables.less
:

Click on Crunch File to view the results of the compiled code—it will prompt you to assign a filename, so give it the default, which is the same name of the Less file, or in this instance, variables.css
:

That was easy, huh? Any time we make a change to our Less file, all we need to do is save it, then click on Crunch File and the file is automatically updated. Let's test this by changing the color value assigned to the @my-color
variable.
In the variable.less
file, alter the value shown against @my-color
as follows:
@my-color: #3f004b;
Resave the file, then click on Crunch File—the variable.css
tab will flash momentarily to indicate that it has been updated. Click on it to view the changes:

As we can see, Crunch! has successfully updated the changes to our code—if there had been an error, it would flag an error message at the foot of our code, such as this one, to indicate a missing }
at the end of our code:

Adding the missing }
in this instance will fix the issue and allow Crunch! to recompile our code without any issue. Let's switch tack now and focus on performing the same operation, but this time using the command line instead.
- 深入理解Spring Cloud與實戰
- 新型電腦主板關鍵電路維修圖冊
- 電腦軟硬件維修大全(實例精華版)
- 計算機組裝·維護與故障排除
- 從零開始學51單片機C語言
- 電腦軟硬件維修從入門到精通
- The Deep Learning with Keras Workshop
- Intel Edison智能硬件開發指南:基于Yocto Project
- 無蘋果不生活:OS X Mountain Lion 隨身寶典
- 基于PROTEUS的電路設計、仿真與制板
- Wireframing Essentials
- The Artificial Intelligence Infrastructure Workshop
- Advanced Machine Learning with R
- 電腦軟硬件維修寶典
- The Deep Learning Workshop