- 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.
- Learning SQL Server Reporting Services 2012
- 筆記本電腦使用、維護與故障排除實戰
- Cortex-M3 + μC/OS-II嵌入式系統開發入門與應用
- 龍芯應用開發標準教程
- 數字邏輯(第3版)
- Camtasia Studio 8:Advanced Editing and Publishing Techniques
- 分布式系統與一致性
- 計算機組裝與維護(第3版)
- 微軟互聯網信息服務(IIS)最佳實踐 (微軟技術開發者叢書)
- Creating Flat Design Websites
- 無蘋果不生活:OS X Mountain Lion 隨身寶典
- Wireframing Essentials
- Python Machine Learning Blueprints
- 單片微機原理及應用
- FPGA實驗實訓教程