Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <p>We can use SASS in many situations, including:</p>

2 <ul><li>An online environment that automatically converts code from SASS to CSS</li>

3 <li>A package in our system, such as the Surge from the first project</li>

4 <li>A separate program that converts files from SASS or SCSS to CSS format</li>

5 </ul><p>Let us deal with each point separately. During the course, you can use any option you are comfortable with. When you work with real projects, you should install SASS as a package on your system. Then you can use assemblers and automate<strong>compilation</strong>- conversion of a SASS code to CSS.</p>

6 <h2>Online environment</h2>

7 <p>If you want to use SASS in an online environment, almost any online code editor you know will work. For example, you can use<a>CodePen</a>. In the CSS tab, you can tell it to use the SASS preprocessor. For the SCSS syntax, you need to select the appropriate drop-down menu item:</p>

8 <p>It is the easiest and fastest option for writing CSS code using the SASS preprocessor.</p>

9 <p>Another popular tool is the<a>Sassmeister</a>, which quickly translates SASS code into plain CSS. The advantage of this service is the ability to select different types of compilers. It allows you to test your code under various conditions and possibly identify a few bugs you may encounter.</p>

10 <h2>Software</h2>

11 <p>You can install separate software that compiles preprocessor files into CSS files. There are many such programs, and many of them are available for all major platforms (Windows, Linux, macOS). One polular program is<a>Koala</a>. Its intuitive interface allows you to understand the process and easily compile preprocessor files.</p>

12 <p>Just select the directory with your SCSS file, and Koala will automatically convert them to a CSS file:</p>

13 <h2>Installing SASS as a package</h2>

14 <p>You can install SCSS as an NPM package on your system. It is the easiest and fastest way to use SASS without installing additional software. And it does not require an Internet connection, as is the case with online services.</p>

15 <p>When installing SASS, make sure you have Node.js installed. Open the terminal and run the following command:</p>

16 <p>After installing Chocolatey, run the following command:</p>

17 <p>Use the following command to install SASS on macOS:</p>

18 <p>After installing the package, the SASS command will be available to you in the terminal:</p>

19 <p>In its basic form, you only need to pass it two parameters:</p>

20 <ul><li><strong>The path to the input file</strong>. It is the SASS or SCSS file on your system</li>

21 <li><strong>The path to the output file</strong>. Here, you can specify the path to the CSS file, where all CSS will be after compilation. You do not have to create this file beforehand. If it does not exist, the program will create it in the path you specified</li>

22 </ul><p>In addition to the compilation, you also can run an interactive - Shell. With it, you can easily experiment with different SASS functions. To start the interactive shell, run the sass -i command in the terminal:</p>

23 <p>As you go through the course, you will encounter different features. Try them in the interactive shell.</p>

24 <p>All examples and exercises in this course will be compiled using this library. The library is called Dart-SASS. Different compilers can handle SASS code differently. The differences are insignificant, but identifying the differences when choosing a library is worth trying.</p>

25 <h2>Additional materials</h2>

26 <ul><li><a>SASS installation documentation</a></li>

27 </ul><h2>Additional assignment</h2>

28 <p>Install SASS on your computer using a batch manager. Try creating a file with an SCSS extension and compiling it. You can enter the following code in the SCSS file:</p>

29 <p>See what you get in the CSS file after compilation.</p>