This chapter is from the book
This chapter is from the book
This chapter is from the book
Working with CSS preprocessors
One of the biggest additions to Dreamweaver over the last few years was support for industry-standard CSS preprocessors. Known by the acronyms LESS (Leaner CSS), Sass (Syntactically Awesome Style Sheets), and SCSS (Sassy CSS), these are scripting languages that enable you to extend the capabilities of cascading style sheets with a variety of productivity enhancements that can then be compiled in a standard CSS file. These languages provide a variety of benefits for designers and developers who prefer to write their code by hand, including speed, ease of use, reusable snippets, variables, logic, calculations, and much more. No other software is needed to work in these preprocessors, but Dreamweaver also supports other frameworks, such as Compass and Bourbon.
In this exercise, you’ll get a taste of how easy it is use preprocessors with Dreamweaver as well as what advantages they offer compared to a regular CSS workflow.
Enabling a preprocessor
Support for CSS preprocessors is site-specific and must be enabled for each site defined in Dreamweaver, as desired. To enable LESS, Sass, or SCSS, you first define a site and then enable the CSS Preprocessors option within the Site Definition dialog.
Select Site > Manage Sites.
The Manage Sites dialog appears.
Select lesson04 in the Manage Sites window.
Click the Edit icon
at the bottom of the Manage Sites window.The Site Definition dialog for lesson04 appears.
Select the CSS Preprocessors option in the Site Definition dialog.
The CSS Preprocessors option contains six subcategories, including General, Source & Output, and options for various Compass and Bourbon frameworks. You can check out the Dreamweaver Help topics for more information on these frameworks. For this exercise, you need only the features that are built into the program itself.
Select the General category.
When selected, this category features the on/off switch for the LESS, Sass, or SCSS compiler, as well as various options for how the languages operate. For our purposes, the default settings will work fine.
Select the Enable Auto Compilation On File Save checkbox to enable the preprocessor compiler, if necessary.
When this is enabled, Dreamweaver will automatically compile your CSS from your LESS, Sass, or SCSS source files whenever they are saved. Some designers and developers use the root folder of the site for compilation. In this case, we’ll separate the source and output files in distinct folders.
Select the Source & Output category.
This category enables you to designate the source and output folders for your CSS preprocessor. The default option targets the folder where the source file is saved.
Select the Define Output Folder option.
When you enable this option, Dreamweaver displays a file path pointing to a folder (css). This folder doesn’t exist yet, but Dreamweaver will create it automatically. If you want to use a different folder, you will have to use the Browse For Folder
icon to select or create the folder.Click the Browse For Folder icon beside the Source Folder field.
Navigate to the Site Root folder.
Select the existing Sass folder, and click Select Folder/Choose.
Save the changes and click Done to return to your site.
)
)
)
)
The CSS preprocessor is enabled, and the source and output folders are now designated. Next, you’ll create the CSS source file.
Creating the CSS source file
When using a preprocessor workflow, you do not write the CSS code directly. Instead, you write rules and other code in a source file that is then compiled to the output file. For the following exercise, you’ll create a Sass source file and learn some of the functions of that language.
Select Standard from the Workspace menu.
Choose Window > Files to display the Files panel, if necessary.
Select lesson04 from the Site List dropdown menu, if necessary.
If necessary, open myfirstpage.html and switch to Split view.
The webpage is unstyled at the moment.
Choose File > New.
The New Document dialog appears. This dialog allows you to create all types of web-compatible documents. In the Document Type section of the dialog, you will see the LESS, Sass, and SCSS file types. We’ll use SCSS in the following exercises. SCSS is a flavor of Sass that uses a syntax that is similar to regular CSS and that many users find easier to learn and work with.
Choose New Document > SCSS.
Click the Create button.
A new blank SCSS document appears in the document window.
Save the file as favorite-styles.scss in the Sass folder you targeted as the Source folder in the previous exercise.
You don’t need to create the CSS file; the compiler in Dreamweaver will do that for you. You’re all set to start working with Sass. The first step is to define variables. Variables are programmatic constructs that enable you to store CSS specifications you want to use multiple times, such as colors in your site theme. By using a variable, you have to define it only once. If you need to change it in the future, you can edit one entry in the style sheet and all the instances of the variable will update automatically.
Insert the cursor into line 2 of favorite-styles.scss. Type $logoyellow: #ED6; and press Enter/Return.
You’ve created your first variable. This is the main yellow color of the site theme. Let’s create the rest of the variables.
Type $darkyellow: #ED0;
$lightyellow: #FF3;
$logoblue: #069;
$darkblue: #089;
$lightblue: #08A;
$font-stack: "Trebuchet MS", Verdana, Arial,
Helvetica, sans-serif;
and press Enter/Return to create a new line.
Entering the variables on separate lines makes them easier to read and edit but does not affect how they perform. Just make sure you add a semicolon (;) at the end of each variable.
Let’s start the style sheet with the base or default styling of the body element. SCSS markup in most cases looks just like regular CSS, except in this case you’ll use one of your variables to set the font family.
Type body and press the spacebar.
Type { and press Enter/Return.
When you typed the opening brace ({), Dreamweaver created the closing brace automatically. When you created the new line, the cursor was indented by default, and pressing Enter/Return moved the closing brace to the following line. You can also use Emmet to enter the settings more quickly.
Type ff$font-stack and press Tab.
The shorthand expands to font-family: $font-stack;.
Press Enter/Return to create a new line within the body rule. Type c and press Tab.
The shorthand expands to color: #000;. The default color is acceptable.
Hold the Alt/Cmd key and press the Right Arrow key to move the cursor to the end of the current line of code.
Press Enter/Return to create a new line. Type m0 and press Tab.
The shorthand expands to margin: 0; completing the basic styling for the body element. Before you save the file, this is a good time to see how preprocessors do their work.
)
)
)
)
)
)
Compiling CSS code
You have completed the specifications for the body element. But you have not created the styling directly in a CSS file. Your entries were made entirely in the SCSS source file. In this exercise, you will see how the compiler that is built into Dreamweaver generates the CSS output.
Display the Files panel, if necessary, and expand the list of site files.
The site consists of one HTML file and three folders: Sass, images, and css.
Expand the view of the css and Sass folders.
The Sass folder contains favorite-styles.scss and _base.scss. The css folder contains favorite-styles.css. This file did not exist when you started the lesson. It was generated automatically when you created the SCSS file and saved it into the site folder defined as the Source folder. At the moment, the CSS file should contain no CSS rules or markup. It’s also not referenced in the sample webpage.
Select the document tab for myfirstpage.html.
Choose View > Split > Code-Live.
Choose View > Split > Horizontally, if necessary.
The document window is split into two windows top to bottom, showing the rendered webpage in one and the code in the other. The page shows only default HTML styling at this point.
In the Code view window, insert the cursor after the opening <head> tag and press Enter/Return to insert a new line.
Type link and press Tab.
The shorthand expands to a <link> reference for a style sheet. It comes in with two attributes, rel and href. You’ll use the href attribute to link the webpage to the generated CSS file.
Insert the cursor between the quotation marks in the href attributes.
Type /css/
As you type, Dreamweaver displays a hinting menu for the file structure of the site. Once you type the second backslash, you should see the CSS file created automatically by the preprocessor.
Press the Down Arrow key to highlight the filename favorite-styles.css.
Press Enter/Return.
The URL to the CSS output file appears in the attribute. The link to the style sheet is now complete.
The CSS output file is now referenced by the webpage. In the Live view window, there should be no difference in the styling, but you should now see favorite-styles.css displayed in the Related Files interface.
Select favorite-styles.css in the Related Files interface.
Code view displays the contents of favorite-styles.css, which is empty at the moment. An asterisk appears next to the filename in the document tab for favorite-styles.scss, indicating that the file has been changed but not saved.
Choose Window > Arrange > Tile.
The webpage and the SCSS source file appear side by side in the program window.
Insert the cursor anywhere in the favorite-styles.scss document window and choose File > Save All.
)
)
)
)
)
)
)
After a moment, the display of myfirstpage.html changes, showing the new font and margin settings. The Code view window also updates to display the new contents of favorite-styles.css. Each time you save the SCSS source file, Dreamweaver will update the output file.
Nesting CSS selectors
Targeting CSS styling to one element without accidentally affecting another is a constant challenge for web designers everywhere. Descendant selectors are one method for ensuring that the styling is applied correctly. But creating and maintaining the correct descendant structure becomes more difficult as the site and style sheets grow in size. All preprocessor languages offer some form of nesting for selector names.
In this exercise, you will learn how to nest selectors while styling the navigation menu. First, you’ll set the basic styling for the <nav> element itself.
In the favorite-styles.scss window, insert the cursor after the closing brace (}) on line 13 for the body rule.
Create a new line; type nav { and press Enter/Return.
The nav selector and declaration structure are created and ready for your entry. Emmet provides shorthand entries for all CSS properties.
Type bg$logoyellow and press Tab. Press Enter/Return.
The shorthand expands to background: $logoyellow, which is the first variable you created in the SCSS source file. This will apply the color #ED6 to the nav element.
Type ta:c and press Tab. Press Enter/Return.
The shorthand expands to text-align: center.
Type ov:a and press Tab. Press Enter/Return.
The shorthand expands to overflow: auto.
Save the source file.
The <nav> element in myfirstpage.html displays the color #ED6. The menu doesn’t look like much yet, but you’ve only just begun. Next, you’ll format the <ul> element. Note that the cursor is still within the declaration structure for the nav selector.
Type ul { and press Enter/Return.
The new selector and declaration are created within the nav rule.
Type lis:n+m5 and press Tab.
The shorthand expands to list-style: none and margin: 5px. These properties reset the default styling of the unordered list, removing the bullets and indent. Next, you’ll override the styling of the list items.
Press Enter/Return and type li { Press Enter/Return again.
As before, the new selector and declaration are fully within the ul rule.
Create the property d:ib and press Tab. Press Enter/Return.
The property display: inline-block will display all the links in a single row, side by side. The last element to style is the <a> for the link itself.
Type a { and press Enter/Return. Type m:0+p:10-15+c:$logoblue+td:n+bg:$lightyellow and press Tab.
The shorthand expands to show the properties margin, padding, color, text-decoration, and background styling the rule a entirely within the li rule. Each of the rules styling the navigation menu has been nested one inside the other in a logical, intuitive manner and will result in an equally logical and intuitive CSS output.
Save the file.
)
)
The navigation menu in myfirstpage.html is reformatted to display a single line of links, side by side. The CSS output file displays several new CSS rules. The new rules are not nested as in the source file. They are separate and distinct. More surprisingly, the selectors have been rewritten to target the descendant structures of the menu, such as nav ul li a. As you can see, nesting rules in the SCSS source file eliminates the chore of writing complex selectors.
Importing other style sheets
To make CSS styling more manageable, many designers split their style sheets into multiple separate files, such as one for navigation components, another for feature articles, and still another for dynamic elements. Large companies may create an overall corporate standard style sheet and then allow various departments or subsidiaries to write custom style sheets for their own subdomains, products, and purposes. Eventually, all these CSS files need to be brought together and called by the webpages on the site, but this can create a big problem.
Every resource linked to a page creates an HTTP request that can bog down the loading of your pages and assets. This is not a big deal for small sites or lightly traveled ones. But popular, heavily traveled sites with tons of HTTP requests can overload a web server and even cause pages to freeze in a visitor’s browser. Too many experiences like this can cause visitors to flee and never return.
Reducing or eliminating superfluous HTTP calls should be the goal of any designer or developer, but especially those working on large enterprise or highly popular sites. One important technique is to cut down on the number of individual style sheets called by each page. If a page needs to link to more than one CSS file, it’s usually recommended that you designate one file as the main style sheet and then simply import the other files into it, creating one large universal style sheet.
In a normal CSS file, importing multiple style sheets would not produce any benefit, because the import command creates the same type of HTTP request that you’re trying to avoid in the first place. But since you are using a CSS preprocessor, the import command happens before any HTTP request occurs. The various style sheets are imported and combined. Although this makes the resulting style sheet larger, this file is downloaded only once by the visitor’s computer and then cached for their entire visit, speeding up the process overall.
Let’s see how easy it is to combine multiple style sheets into one file.
Open myfirstpage.html and switch to Split view, if necessary. Open favorite-styles.scss and choose Window > Arrange > Tile.
The two files are displayed side by side to make it easier to edit the CSS and see the changes as they occur.
In myfirstpage.html, click favorite-styles.css in the Related Files interface.
Code view displays the content of favorite-styles.css. It contains the output of rules written in the SCSS source file.
In favorite-styles.scss, insert the cursor before the body rule (around line 9). Type @import "_base.scss"; and press Enter/Return to insert a new line.
This command imports the contents of the file _base.scss stored in the Sass folder. The file was created ahead of time to style other portions of your page. At the moment, nothing has changed, because favorite-styles.scss has not been saved yet.
Save favorite-styles.scss and observe the changes in myfirstpage.html.
If you correctly followed the instructions on how to create the HTML structure earlier in this lesson, the page should be entirely formatted now. When you examine favorite-styles.css, you will see that dozens of rules were inserted before the body rule. Imported content will be added starting at line 2. This may be confusing at first since the SCSS file had seven lines of code before the body rule. Although the @import command was at line 9 in the SCSS file, the variables are not passed to the final CSS directly. They are parsed and rendered into each of the rules they affect. Once the content has been imported, normal CSS precedence and specificity take effect. Just make sure that all rules and file references appear after the variables; otherwise, the variables won’t work.
Save and close all files.
)
In this section, you created an SCSS file and learned how to work with a CSS preprocessor. You experienced various productivity enhancements and advanced functionality and have glimpsed just a bit of the breadth and scope of what is possible.
Learning more about preprocessors
Check out the following books to learn more about CSS preprocessors and supercharging your CSS workflow:
Beginning CSS Preprocessors: With SASS, Compass.js, and Less.js, by Anirudh Prabhu, Apress (2015); ISBN: 978-1484213483
Instant LESS CSS Preprocessor How-to, by Alex Libby, Packt Publishing (2013); ISBN: 978-1782163763
Jump Start Sass: Get Up to Speed with Sass in a Weekend, by Hugo Giraudel and Miriam Suzanne, SitePoint (2016); ISBN: 978-0994182678
Using linting support
Dreamweaver provides live code error checking. Linting support is enabled by default in Preferences, which means the program monitors your code writing and flags errors in real time.
Open myfirstpage.html and switch to Code view. If necessary, select Source Code in the Related Files interface.
Insert the cursor after the opening <article> tag and press Enter/Return to create a new line.
Type <h1>Insert headline here</h1>
Delete the closing </h1> tag.
Save the file.
You failed to close the <h1> element in step 3. When an error occurs, a red X will appear at the bottom of the document window whenever you save the page.
Click the X icon
.The Output panel opens automatically and displays the coding errors. In this case, the message says that the tag must be paired and identifies what line it thinks the error occurs on. The message erroneously targets line 27, but this can happen because of the nature of HTML tags and structures.
Double-click the error message.
Dreamweaver focuses on the article in the Code view window that it identifies as containing the error. Since Dreamweaver is looking for the closing tag for the <h1> element and flags it. Unfortunately, the error message is not always this accurate. Dreamweaver’s linting function will get you close to the error, but often you will have to look earlier in the code to track down the actual issue yourself.
Insert the cursor at the end of the code <h1>Insert headline here. Type </h1>
Dreamweaver should now be closed. If not, go ahead and finish it properly.
Save the file.
Once the error is corrected, the red X is replaced by a green checkmark.
Right-click the Output panel tab and select Close Tab Group from the context menu.
)
)
)
It’s important to be alert for this icon as you save your work. No other error message will pop up indicating any problems, and you’ll want to catch and correct any errors before uploading your pages to the web server.