Beginning CSS Web Development: From Novice to Professional Distributed to the book trade worldwide by Springer-Verlag New York, Inc., Spring Street, 6th Floor, In a nutshell, a style sheet always has less weight than the. We present the book entitled Less Web Development Cookbook Meyghani Amin produced and install media as a kindle, pdf, zip, ppt, rar, word, as well as txt. Less Web Development Cookbook b Over practical recipes to help you write leaner, efficient. CSS code About This BookCreate and customize your website.
|Language:||English, Spanish, Arabic|
|ePub File Size:||24.45 MB|
|PDF File Size:||12.70 MB|
|Distribution:||Free* [*Regsitration Required]|
Less is a dynamic style sheet language to help you make your CSS code more maintainable, readable, and reusable. It provides impressive features to enhance your web development skills with complex co. PDF下载地址( MB). Less is a dynamic style sheet language to help you make your CSS code more maintainable, readable, and reusable. It provides impressive. After finishing this book, I will start writing Less Web Development Cookbook for Packt Publishing. Although I have written many blogs and technical project.
Estimated delivery dates - opens in a new window or tab include seller's handling time, origin ZIP Code, destination ZIP Code and time of acceptance and will depend on shipping service selected and receipt of cleared payment - opens in a new window or tab. CSS Lint validates and tests your code, among other things, for performance, maintainability, and accessibility. What this book covers Chapter 1, Improving Web Development with Less, shows how CSS3 brought advanced functions such as gradients, transitions, and animations to web designers. To extend a class including the nested elements of the extended style, you will have to add the all keyword, as shown in the following code: The chapter also explains prebuilt mixins and other sources that help you re use them. As seen in the rounded-comers example, you only have to declare the properties once. First published:
At the time of writing this book, the latest version is 1. The source code of Less will be maintained on GitHub. Everybody will be allowed to contribute to it.
You can use Less free of charge. What this book covers Chapter 1, Improving Web Development with Less, shows how CSS3 brought advanced functions such as gradients, transitions, and animations to web designers. It also explains how, on the other hand, CSS code became more complex and difficult to maintain. Less helps you make your CSS maintainable, reusable, and prevent code duplications.
Preface Chapter 2, Using Variables and Mixins, explains why variables allow you to specify widely-used values in a single place and then reuse them throughout the style sheet, thus making global changes as easy as changing one line of code.
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. The chapter also explains what parametric mixins are and how to use them.
Chapter 3, Nested Rules, Operations, and Built-in Functions, explains the use of nested rules for making inheritance clear and for making shorter style sheets. The chapter also explains how to create complex relationships between properties and how to use the built-in ftmctions of Less. Chapter 4, Avoid Reinventing the Wheel, teaches you how Less code and mixins can become complex because they handle different browsers and devices. The chapter also explains prebuilt mixins and other sources that help you re use them.
Chapter 5, Integrate Less in Your Own Projects, teaches you how to organize your files for new projects or get the projects you maintain ready for using Less. The chapter also teaches you how to build web applications with Less or integrate it in your WordPress themes.
What you need for this book To understand and get the full benefit of the contents of this book, we expect you to have built a website with CSS previously. A basic understanding of CSS will be required. We will introduce these CSS aspects briefly in the first chapter as well.
You will need a modem web browser such as Google Chrome or Mozilla Firefox to run these examples. Use any preferred text or CSS editor to write your Less code. Preface Who this book is for Every web designer who works with CSS and who wants to spend more time on real designing tasks should read this book.
It doesn't matter if you are a beginner web designer or have used CSS for years; both will profit from reading this book and will learn how to utilize Less. We also recommend this book for teachers and students in modem web design and computer science. Less does not depend on a platform, language, or CMS. If you use CSS, you can and will benefit from Less. Conventions In this book, you will find a number of styles of text that distinguish between different kinds of information.
Here are some examples of these styles, and an explanation of their meaning. Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, and user input are shown as follows: Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: J Reader feedback Feedback from our readers is always welcome. Let us know what you think about this book— what you liked or may have disliked.
Reader feedback is important for us to develop titles that you really get the most out of. To send us general feedback, simply send an e-mail to f eedbackepacktpub. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www. Customer support Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code You can download the example code files for all Packt books you have purchased from your account at http: If you purchased this book elsewhere, you can visit http: Preface Errata Although we have taken every care to ensure the accuracy of our content, mistakes do happen.
If you find a mistake in one of our books — maybe a mistake in the text or the code— we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http: Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website, or added to any list of existing errata, under the Errata section of that title.
Piracy Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can ptirsue a remedy.
Please contact us at copyright packtpub. We appreciate your help in protecting otir authors, and our ability to bring you valuable content.
Questions You can contact us at questions packtpub. With CSS3, web designers are able to rely on advanced functions such as gradients, transitions, and animations. On the other hand, CSS code becomes more complex and difficult to maintain. Less enables you to use variables, functions, operations, and even rule or selector nesting while coding your CSS. The DRY principle prevents you from repeating any kind of information in your code. This chapter will cover the following topics: CSS3 extends the old CSS with other new selectors, text effects, background gradients, and animations.
The combination of HTML5 and CSS3 is ideal for building responsive websites because of their high acceptance on mobile phones and other devices. You will be shown the ones that are the most significant when learning about their concepts within this book. CSS selectors play an important role in writing Less code. For body p. Selectors don't refer exclusively to one element. They can point to more than one element and different ones can refer to the same element.
For instance, a single p selector refers to all the p-elements, including the p-elements with a. In the case of conflicts, cascade and specificity determine which styles should be applied.
When writing Less code, we should keep the aforementioned rules in mind. Less makes it easier to write complex CSS without changing how your website looks. It doesn't introduce any limitations on your final CSS. With Less, you can edit well-structured code instead of changing the effect of the final CSS.
CSS3 introduces many new and handy selectors. One of them is: Such selectors add powerful functions to CSS3.
You can find these specifications in the following section. The rules regarding the order of importance have not significantly changed with CSS3. Sooner or later, you will be in a situation where you're trying to apply a CSS style to an element, but its effect stays invisible. You will reload, pull out your hair, and check for typos again and again, but nothing will help.
This is because in most of these cases, your style will be overruled with another style that has a higher precedence. The global rules for Cascade in CSS are as follows: After this, check who set the declaration; styles set by the author get a higher precedence than the styles defined by the user or browser default.
Default means the styles are set by the web browser, author styles are defined by CSS in the web page, and user styles are set by the user via the settings of his or her web browser. The importance of the user is higher than the default, and the code with the! Note that browsers such as Firefox have options to disable pages in order to use other alternatives to user-defined fonts. Here, the user settings overrule the CSS of the web page.
This way of overruling the page settings is not part of the CSS precedence tmless they are set using! Inline styles will always get the highest specificity and will always be applied unless overwritten by the first two Cascade rules.
In practice, you should not use inline styles in many cases as it will break the DRY principle. It will also disable you from changing your styles on a centralized location only and will prevent you from using Less for styling.
An example of an inline style declaration is shown as follows: This I means that div. I If the number of IDs for two declarations is equal, the number of classes, pseudo classes, and attributes of the selector will be of importance. Classes start with a dot. For example,. Pseudo classes, such as: The f ooter a. If this value is equal for both declarations, we can start counting the elements and pseudo elements. The latest variable will be defined with a double colon: Pseudo elements allow authors to refer to otherwise inaccessible information, such as: The following example shows you how that works.
You should now know what to do when your style isn't directly applied. In most cases, make your selector more specific to get your style applied.
Chapter 1 When Cascade and! Although Less won't help you here, tools such as Firebug and other developer tools can make the specificity visible. An example using Firebug is shown in the following screenshot, where the selector with the highest specificity is displayed at the top of the screen and the overruled styles are struck out: Inherited from ul.
CSS line 7. It is extremely useful in creating responsive and flexible layouts. Flexbox provides the ability to dynamically change the layout for different screen resolutions. It does not use floats and contains margins that do not collapse with their content. Unfortunately, major browsers do not offer full support for Flexbox layouts at this moment.
We focus on Flexbox due to its power, and as it is an important feature of CSS, we can also produce and maintain it using Less. You can use these mixins to create Flexbox layouts with Less, without using duplicate code. Improving Web Development with Less These mixins will not be explained in great detail now, but the following example shows how Less reduces the code needed to create a flex container.
Using CSS, you might use the following code: However, if you use Less, the same effect can be produced by inserting the following line of code: At the time of writing this book, Firefox and Internet Explorer lEll also offered full or better support for Flexbox layouts. Flexboxes have been mentioned because they have the potential to play an important role in the future of web design. For now, they are beyond the scope of this book. This book will focus on creating responsive and flexible layouts with Less using CSS media queries and grids.
As mentioned earlier, it has the same syntax as CSS. This means any CSS code is, in fact, a valid Less code too. With Less, you can produce CSS code that can be used to style your website. The process used to make CSS from Less is called compiling, where you can compile Less code via the server side or client side. The examples given in this book will make use of client-side compiling. Client side, in this context, means loading the code in a browser and compiling Less code into CSS code using resources from the local machine.
Client-side compiling is used in this book because it is the easiest way to get started while being good enough for developing your Less skills. Chapter 1 It is important to note that the results from client-side compiling serve only for demonstration purposes. For production and especially when considering the performance of an application, it is recommended that you use server-side precompiling. Less bundles a compiler based on Node.
These GUI's will be discussed towards the end of this chapter. Getting started with Less You can finally start using Less. The first thing you have to do is download Less from http: In this book. Version 1. After downloading it, an HTML5 document should be created.
It should include less. Please note that you can download the examples, including a copy of less. To start with, have a look at this plain yet well-structured HTML5 file: After the Less file, you can call less.
To keep things clear, htmlSshiv which you can access at http: You already know you should only use less. To support less. Now, open http: You will see the Less makes me Happy! The syntax of Less and CSS doesn't differ here, so you can enter the following code into this file: You should see the header text in red. The color property has been set to red between the accolades. The properties will then be applied onto your selectors, just like CSS does.
It is not necessary to have a web server that is running. Navigating to index. Unfortunately, this won't work for all browsers, so use Mozilla Firefox in order to be sure. The examples in this book use http: Chapter 1 Using the watch function for automatic reloading The less. It is pretty simple to use. Execute the following steps: So, open http: Your browser will reflect your changes without having to reload. You should now navigate to your browser, which should show Less makes me Happy!
Rearrange your screen in order to see both the text editor and browser together in the same window. Pretty cool, isn't it? The examples in this code use color names instead of hexadecimal I values.
For example, the code uses red instead of ffOOOO. The I basic color names are converted to their hexadecimal value by less. In this book, named colors are always used. I Debugging your code As we are only human, we are prone to making a mistake or a typo.
It is important to be able to see what you did wrong and debug your code. If your Less file contains errors, it won't compile at all.
Instead, files are cached in the browser's I local storage. If env is set to product ion, this caching could yield I unexpected results as the changed and saved files are not compiled. In your browser, you will see a page like the following screenshot: In the case of a name error, an undeclared function or variable would have been used. Chapter 1 It is possible to set other settings for debugging, either in the global Less object or by appending the setting to the URL.
This setting enables other tools to find the line number of the error in the Less source file. Setting this option to mediaQuery makes error reporting available for the FireBug or Chrome development tools. Similarly, setting this to comments achieves the same for tools such as FireLess. FireBug, Chrome development tools, or the default browser inspect the element functions which you can access by right-clicking on your browser screen can also be used to see and evaluate the compiled CSS.
In the example given in the following screenshot, you will see an ID with value less: Unless explicitly mentioned, the format of these examples always shows the Less code first, followed by the compiled CSS code.
For instance, you can write the following lines of code in Less: In your browser, you will see a representation of a header, body, and footer.
Any error in this file will stop the compiler and throw an error. Although the Less code shows some similarities to the plain CSS code, the process described here totally differs from editing your CSS directly.
The following screenshot shows you how this layout will look when opened in your web browser: Your first layout in Less Chapter 1 Vendor-specific rules CSS3 introduced vendor-specific rules, which offer you the possibiUty of writing some additional CSS applicable for only one browser. At first sight, this seems the exact opposite of what you want.
What you want is a set of standards and practicalities that work the same with every browser and a standard set of HTML and CSS which has the same effect and interpretation for every browser.
These vendor-specific rules are intended to help us reach this Utopia. Vendor-specific rules also provide us with early implementations of standard properties and alternative syntax. Last but not least, these rules allow browsers to implement proprietary CSS properties that would otherwise have no working standard and may never actually become the standard. For these reasons, vendor-specific rules play an important role in many new features of CSS3.
For example, animation properties, border-radius, and box-shadow all depend on vendor-specific rules. Vendors use the following prefixes: With border-radius, you can give HTML elements a rotmded comer.
In previous years, many implementations of rounded corners using images and transparency have been seen. However, these were inflexible not fluid and difficult to maintain. Vendor-specific rules are required for implementation, and although rounded corners can't be handled with a single line of code, its usage definitely makes rotmding comers a lot easier.
To give an element rounded comers with a radius of 10 pixels, you can use the CSS code with vendor-specific mles as follows: The radii are given in the following order: By keeping these rules in mind, you will see how Less can keep your code clean. You can open roundedcorners. In your browser, you will see a representation of a header, body, and footer with roimded comers. If you were using CSS, you would have to repeat the vendor-specific rules three times for the header, footer, and body.
In order to change these rules or add a vendor, you would also have to change the same code three times. To begin with, you will perhaps think, "Why not group the selectors? Grouping selectors based on properties makes no sense when reading and maintaining your code. Such constructs will also introduce many duplicated and unstructured usages of the same selectors. With Less, you are able to solve these problems efficiently. By creating a so-called mixin, you can solve the issues mentioned earlier.
For the border radius, you can use the following code: The border radius for the content is 20 pixels instead of 10 pixels, as used for the header and footer. Again, Less helps us solve this efficiently. Mixins can be called with parameters in the same way in which functions can be called in functional programming. This means that in combination with a value and a reference for this value, mixins can be called in order to set the properties.
In this example, this will change to the following code: From this point onwards, mixins can be used in your code. Note that this code leaves out the general styling of the div and body tags in the HTML.
These styles are only used to make the demo look good and do not actually demonstrate Less in any useful manner. After rewriting your Less code, reload your browser or watch it if you have applied the! You will see that the output will be exactly the same. This shows you how to get the same results with Less using a more efficiently structured code. Preventing cross-browser issues with CSS resets When talking about cascade in CSS, there will no doubt be a mention of the browser default settings getting a higher precedence than the author's preferred styling.
When writing Less code, you will overwrite the browser's default styling. In other words, anything that you do not define will be assigned a default styling, which is defined by the browser. This behavior plays a major role in many cross-browser issues. To prevent these sorts of problems, you can perform a CSS reset.
Chapter 1 CSS resets overwrite the default styling rules of the browser and create a starting point for styling. This starting point looks and acts the same on all or most browsers. In this book, normalize. It lets browsers render all elements more consistently and makes them adhere to modern standards. By default, the search path for the directives starts at the directory of the main file. Although setting alternative search paths is possible by setting the path's variable of your Less environment , it will not be used in this book.
Again, you should note that normalize. You should pay particular attention to the profits of this solution! If you want to change or update the CSS reset, you will only have to replace one file. If you have to manage or build more than one project, which most of you should be doing, then you can simply reuse the complete reset code. Creating background gradients A new feature in CSS3 is the possibility of adding a gradient in the background color of an element. This acts as a replacement for complex code and image fallbacks.
It is possible to define different types of gradient and use two or more colors. In the following figure, you will see a background gradient of different colors: The background gradients use vendor-specific rules. You can make use of the example code from the rounded comers example to add gradients to it. This mixin has default values. IE9 and its earlier versions do not support gradients.
Improving Web Development with Less To make things clear, it is important to keep in mind the button that is about to be pressed. The button will have two states: Without transitions and animations, we are enabled to style these states only.
The color of the button is white, and its color becomes red when you hover the mouse over it. In CSS terms, its state becomes hovered by adding the: In this case, the transition describes how the hovered button becomes red. For example, the change in color from white to red in two seconds which makes it pink halfway shows that the start of the color change is slow and changes faster as time passes.
Using animations here enables us to describe the state of the button for every time interval between the start and end. For example, you don't have to change the color from white to red, but the change covers all the states, from white, blue, green, and finally to red.
Transformations change the position of an element and how it looks. They do not depend on the state of the element. Some of the possible transformations are scaling, translating moving , and rotating. Also, in this case, vendor-specific rules will play an important role. Now, a transformation will be added to our example. This can be height, background- color, visibility, and so on. This ftmction describes the value of a property, given that a certain percentage of it has been completed.
The transition-timing-function property describes the completeness of the transition as a function of time. Setting it to linear shows the effect with the same speed from start to end, while ease starts slow and ends slow, having a higher speed in the middle.
The predefined functions are ease, linear, ease- in, ease -out, ease-in-out, step- start, and step-end. You can set the background color of the body when you hover over it.
Note that you don't need to use the transition to change the gradient color but rather change the background- color attribute. You are using background- color because transition-duration doesn't have a visible effect on the gradient.
The code of the background- color transition is as follows: Move yotir mouse over the content and see it change from white to red in 5 seconds. Finally, a second example that rotates the header can be added. So, in this case, you can define some vendor-specific rules and add these animation properties to header: Amazing, isn't it? With a little bit of creative thinking, you will see the possibilities of creating a rotating windmill or a winking owl using only CSS3.
However, the first thing that should be done is to explain the code used here in more detail. As mentioned earlier, there are many cases in which you would make combinations of animations and transformations.
In this example, you also get to animate a transformation effect. To tmderstand what is going on, the code can be split into three parts. In the preceding example, a state of percent completeness is described. At this state, the animated element should have made a rotation of degrees. This rotation is the second part that needs our attention. The transformation describes the position or dimensions of an element in the space. In this example, the position is described by the number of degrees of rotation around the axis, degrees at percent, degrees at 50 percent, 90 degrees at 25 percent, and so on.
The third part is the animation itself, described by: This is the shorthand notation of settings of the subproperties of the animation property.
In fact, you can write this as the following code, without the vendor-specific rules: After doing this, you can extend it. For example, add an extra keyframe, which makes the time curve nonlinear, as follows: Don't forget to remove the gradient to see its effect. This is shown in the following code: In Chapter 4, Avoid Reinventing the Wheel, a solution will be provided to you for this. Unf orttmately, browser support for transitions, transformations, and animations is not great and varies between browsers.
To solve this, many developers look to jQuery to support their animations. The j Query. You can still use Less to set the initial CSS. An alternative for this will be to use animate. Box-sizing The box-sizing property is the one that sets the CSS-box model used for calculating the dimensions of an element.
In fact, box-sizing is not new in CSS, but nonetheless, switching your code to box-sizing: When using the border -box settings, calculation of the width of an element includes border width and padding. So, changing the border of padding won't break your layouts. You can find a copy of the code used in this section in boxsizing. Improving Web Development with Less Nowadays, most web designs use a grid.
Grids split your design into columns of equal size. This helps you make things clear and build responsive interfaces. Depending on the available screen size or width , you can show your content and navigation with a different representation of the same columns. To handle different screen sizes, some parts of your website will have fluid width or height. Other elements, such as borders, gutters, and the white space, should have a fixed width.
The combination of fluid widths as a percentage of the screen width or viewport with fixed widths becomes complex.
This complexity will be due to the fact that browsers use different calculations for padding and margins of elements. In order for you to see this, look at the following example. A container of pixels width has been created. Inside this container, you can add two rows and split the second row into two parts of 50 percent or half width. An HTML wrapper The current structure doesn't show a problem until you add some padding, which is used to construct some space or a border between the two columns on the second row numbers 2 and 3 in the image of the HTML wrapper.
The padding and the border will break our layout as follows: The box-sizing: Now, the results should look like the following screenshot: This will make the calculation a lot easier. Of course, you can do the calculating yourself once the parent container wrapper has a fixed width. If the parent has pixels, then 50 percent of this will be pixels. Taking away the padding and the width of the border will give you the fixed size of a column. This won't work when your parent has a fluid width the percentage of the viewport.
Fluid layouts change their width with the width of the screen. If your screen becomes smaller, then all the elements become smaller too and the percentage stays equal. By doing calculations for all the possible screen sizes to find the real size of a column that allows all of your elements to align, you will quickly find this to be a long, challenging, and arduous process.
Improving Web Development with Less For these reasons, you should make use of box- sizing: Please note that box-sizing has to also be defined by vendor-specific rules as follows: Sboxmodel; -moz-box-sizing: Sboxmodel; box-sizing: Server-side compiling You have taken the first few steps towards Less development already.
As explained earlier, client-side compiling has been used. However, client-side compiling with less. This is because despite making your development easy and fast, compiling your Less files for every page request or in fact, initial page load per user will actually slow down your website. Chapter 1 For the production environment, it is required that you compile your files and serve the final CSS file to the browser. The term server side can be somewhat misleading. Server side in this context means a compiled CSS code is sent to the client's browser instead of Less code, which has to be compiled in the client's browser by less.
You should precompile your Less code. By copying and pasting the results of less. Less bundles a command-line compiler. Installing and using it is simple using the following command: Node enables you to rtm Java scripts without a browser. You will find the Node. Use the -help ftinction to get a list of options you can use with the following command-line compiler: The links to styles.
When taking this code into production, you have to compress and minimize it in order to increase the loading speed and save on the bandwidth as well. The basic steps for compressing and minimizing the CSS code are removing comments, white spaces, and other unnecessary code.
The results won't be easy to be read by a human, but this doesn't matter because you can use the Less files to update or modify the CSS. Improving Web Development with Less The Less command-line compiler has two options for compressing and minimizing. You cannot use both options together.
Clean-css claims to be faster, and until recently, you would not have found much difference in the compression.
By compiling keyframes. With clean-css, this drops to bytes, whilst YUI gives bytes. Since Version 1. There are many GUIs available for different platforms in order to edit and compile your Less code. All of them cannot be mentioned here. Instead, the following is a list of the most positive noticeable ones: It compiles many languages including Less. It includes optimizations and browser previews. When choosing a GUI for Less development, always check which version of less.
Some GUI's are built on older versions of less. Web developers using Visual Studio should check out Web Essentials. Web Essentials extends Visual Studio with a lot of new features, including Less.
There is a Less plugin for Eclipse also. You learned how to compile your Less code on the client side. Furthermore, you have written the code that allows you to have rounded comers, gradients, and animations in Less, so you can now witness the profits of using Less and take the crucial initial steps to organize and plan your new projects.
You witnessed why you would want to use CSS resets, how to compile these into Less code, as well as how the box-sizing border-box can make your job easier. Last but not least, you have learned what server-side compiling is and how to use GUIs. In the next chapter, you will learn how to use variables in Less and how to build and use complex mixins.
Using Variables and IVIixins In this chapter, you will study Less in more detail, where you will learn more about variables and mixins. Variables in Less can be reused anywhere in the code. Although they are often defined in a single place, they can also be overwritten elsewhere in the code.
They are used to define commonly used values that can be edited only once at a single place. Based on the Don't Repeat Yourself DRY principle, commonly used values will help you build websites that are easier to maintain. Mixins are used to set the properties of a class. They bundle tasks in a single line of code and are also reusable. You will learn how to create, use, and reuse them in your project and write better CSS without code duplications. It is important that you are able to understand them clearly.
That is why this chapter starts with some notes and examples of comments. Don't be sparse with your comments when keeping the file size, download time, and performance in mind. In the process of compiling and minimizing your final CSS code, comments and other layout structures will be effectively removed.
You can add comments for understanding and readability wherever needed. Using Less, you will conserve these comments in the final style sheet apart from the single-line comments, which are not printed. Minimizers will remove these comments in your final compiled style sheet. An example of this can be seen in the following code: This is shown in the following code snippet: You can use this syntax to write some copyright notices at the top of your style sheet.
They allow you to specify widely -used values in a single place and then reuse them throughout your Less code. The properties of the final style sheet can be set with variables.
So, imagine that you don't have to search for every declaration of a specific color or value in your style sheets any more. How does all of this work? Variables will start with and have a name. To write the name, you are allowed to use any alphanumeric character, underscores, and dashes. Although alphanumeric characters, underscores, and dashes are used in variable names in this book, the specifications allow you to use any character, with a few exceptions.
The specifications find their origin in the CSS grammar which you can view at http: Names starting with a dash are reserved for vendor-specific rules, and a space is already used to separate class names from each other. It is possible and allowed to use escaping, which is very rare for programming languages.
However, the escaping of white spaces is not possible.
NULL is also not allowed. As you have seen in the first chapter, parameters used by mixins also start with. That's not all. You can give a variable a value, which will be called a declaration.
A value can contain anything that is a valid value for a CSS property. You can use a colon: A declaration ends with a semicolon ;. The following examples will make this clear: This quality makes variables extremely powerful when programming Less code. Take a look at the example code for this chapter from the downloadable code for this book to get a better understanding. Using Variables and Mixins Organizing your files As you have seen, you only have to declare a variable once to use it anywhere in the code.
So, to make changes to the variables, you also have to change them only once. It is a great practice to organize your files.
If you want to change something, you now know where to look. Recalling CSS reset and border-boxing from the first chapter, your main Less file will now look like the following code snippet: Filenames are written between quotes and followed by a semicolon.
Besides the Less files, you can also import plain CSS files, which will not be processed for the Less directives; this will be explained in more detail in Chapter 5, Integrating Less in Your Own Projects. Now you should open http: You will see a straightforward website layout, which contains a header, content block, side menu, and three-columned footer, as shown in the following screenshot.
All the layout items have blue accents. LESS runs on both the server-side with Ncde. Don't be scared by the complexity of the code in them. This code and layout have been used to show the power of widely-used variables that have been defined in a single place. This can be better demonstrated with more realistic and complex examples than by just a few lines of code.
Rest assured that all the other code will explain this to you soon. Before you know it, all this code will look very familiar to you. After this, watch the results in your browser. Reload your browser if you still haven't used the!
The layout will now be shown in green. If you weren't convinced earlier, you should be now. In practice, you won't change a complete website using a single line of code, but this example shows what Less can do to make your work easier.
Imagine that you have finished your dark-green website's job, and you show it to your boss. There is now a new concern; you will have to name, declare, and save your variables in a smart and proper fashion.
When doing this, be consistent and clear as it is of high importance. When organizing your variables, follow the same strategy at all times, using name conventions and comments where the context isn't clear enough. Please keep in mind that someone should be able to take over your work without any further instructions at any moment. To achieve this, you will have to explore the variables at deeper levels.
Naming your variables You should always give your variables meaningful and descriptive names. Variable names such as ai and a2 will get compiled but have not been chosen well. When the number of variables grows or when you have to change something quite deep in the code, you will not know or remember what a2 has been used for. You will have to look up its context to find its use in your Less files or even worse, inspect your HTML elements to find which CSS rules are applied on it in order to find the Less context.
In this unfortunate case, you will be back to square one. These variables are meaningful and descriptive because their names try to describe their function or usage rather than their value. This process of naming will also be called semantic naming.
This could describe some house style color of a website, like in the previous case. As you can see, hyphens are used to separate words in variable names. These names are called hyphenated names. You should use lower case letters.
There aren't any strict rules to use hyphenated names; the so-called CamelCase is used and is familiar to many programmers as an acceptable alternative. Both hyphenated and CamelCase names improve readability. These rules are not always strict, and they are not followed by convention. This book follows this convention when writing Less code, and it therefore makes use of hyphenated names.
Whether you prefer CamelCase or hyphenated names doesn't matter greatly. When you have chosen either CamelCase or hyphenated names, it is important to be consistent and use the same way of naming throughout your Less files. When you perform calculations, a hyphenated name may cause I some trouble. You will need some extra spacing to solve this. I Using a variable If your project grows, it will be impossible to add a variable for every CSS property value, so you will have to choose which values should be a variable or which should not.
There are no strict rules for this process. You will find some clear guidance to make these choices in the following sections. You should first try to find property values that are used more than once in your code. Repeated usage is suitable when creating variables. Chapter 2 Second, you can make variables of properties that are used for customization settings. Finally, you should consider creating variables for reusable components.
Looking at our example, you could reuse the header in other projects. Open http: As you can see, http: The last declaration wins In the first chapter, you read about CSS cascade, where the last rule said that the value declared last will win if the output of the other rules is equal.
Less uses the same strategy, where the last declaration of a variable will be used in all the preceding code. In the following code, you will see that the property value is set to 2 in accordance with the last declaration wins rule: Less first reads all of your code. When the value of a variable is used, it is only the last-assigned or last-read value that is actually used. The fact that the last declaration wins will only affect the declaration defined in the same scope.
In most programming languages, the scope is defined by a part of the code that the compiler can run independent of the other code. Ftmctions and classes can have their own scope. In Less, mixins have their own scope. Mixins will be discussed in more detail later on in this chapter. Chapter 2 The following code shows you that the property value is set to 3 in accordance with the value declared inside the scope of the mixin: This makes these variables theoretical constants.
Compare this with a definition of the mathematical value of pi in your code, which is always the same. For this reason, variables should be declared only once.
Redeclaration of variables and the rule that the last declaration wins will be used in the customization of many Less projects and code. As you see, you have created a customized version of your layout with only three lines of code! Using Variables and Mixins Variable declaration is not static Although variables act like constants, their declaration is not necessarily unchangeable or static.
First, you can assign a value of one variable to another, as shown in the following code: Please understand that you don't need to create some kind of reference as the rule that the last declaration wins is applied here. Free shipping. The Ultimate Instant Pot Cookbook: Skip to main content. Email to friends Share on Facebook - opens in a new window or tab Share on Twitter - opens in a new window or tab Share on Pinterest - opens in a new window or tab.
Add to watch list. Similar sponsored items. Picture Information. Get the item you ordered or get your money back. Learn more - opens in new window or tab. Seller information latals-5 Contact seller. Visit store. See other items More See all. Item Information Condition:.
Sign in to check out Check out as guest. Add to watch list Remove from watch list. Watch list is full. Free Shipping. Your country's customs office can offer more details, or visit eBay's page on international trade. Item location:. Ships to:. This amount is subject to change until you make payment. For additional information, see the Global Shipping Program terms and conditions - opens in a new window or tab This amount includes applicable customs duties, taxes, brokerage and other fees.
For additional information, see the Global Shipping Program terms and conditions - opens in a new window or tab. Estimated between Wed. Estimated delivery dates - opens in a new window or tab include seller's handling time, origin ZIP Code, destination ZIP Code and time of acceptance and will depend on shipping service selected and receipt of cleared payment - opens in a new window or tab. Delivery times may vary, especially during peak periods. Any international shipping and import charges are paid in part to Pitney Bowes Inc.
Learn More - opens in a new window or tab International shipping and import charges paid to Pitney Bowes Inc. Learn More - opens in a new window or tab Any international shipping and import charges are paid in part to Pitney Bowes Inc.
Learn More - opens in a new window or tab Any international shipping is paid in part to Pitney Bowes Inc. Learn More - opens in a new window or tab. Report item - opens in a new window or tab. This translation tool is for your convenience only. The accuracy and accessibility of the resulting translation is not guaranteed. Seller assumes all responsibility for this listing.
Item specifics Condition: Very Good: A book that does not look new and has been read but is in excellent condition. No obvious damage to the cover, with the dust jacket if applicable included for hard covers. May be very minimal identifying marks on the inside cover. Very minimal wear and tear. See all condition definitions - opens in a new window or tab. Shipping and handling. This item will ship to Ukraine , but the seller has not specified shipping options.
Contact the seller - opens in a new window or tab and request a shipping method to your location. Shipping cost cannot be calculated.
Please enter a valid ZIP Code. Item location: Shipping to: