{"id":1590,"date":"2013-02-19T00:00:00","date_gmt":"2013-02-19T00:00:00","guid":{"rendered":"https:\/\/test.simple-talk.com\/uncategorized\/using-sass-and-compass-in-asp-net-mvc-with-web-workbench\/"},"modified":"2021-05-17T18:34:57","modified_gmt":"2021-05-17T18:34:57","slug":"using-sass-and-compass-in-asp-net-mvc-with-web-workbench","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/using-sass-and-compass-in-asp-net-mvc-with-web-workbench\/","title":{"rendered":"Using SASS and Compass in ASP.Net MVC with Web Workbench"},"content":{"rendered":"
\n

SASS and Compass have become a mainstream alternative to writing standard CSS code. However since SASS and Compass are a relatively new, open source, superset of the CSS language there is no native support in Visual Studio. Through the use of a third party tool, Web Workbench by Mindscape, SASS and Compass can be integrated in to our normal Visual Studio workflow.<\/p>\n

What is SASS?<\/h2>\n

SASS (S<\/strong>yntactically A<\/strong>wesome S<\/strong>tyle S<\/strong>heets) is a superset of CSS that compiles to standard CSS code using a command line tool or IDE plugin. Because the SASS language is a superset of CSS3, this means that any valid CSS is also valid SASS.<\/p>\n

SASS is an open source project that is coded in Ruby. SASS was created in order to simplify CSS development by providing a richer syntax, and implementing various features that advocate DRY principals.<\/p>\n

Introduction to SASS features<\/h2>\n

SASS introduces features to writing CSS that are currently unavailable in CSS3. Features such as variables, mixins and selector inheritance make it possible to write modular and re-useable code. The readability of code is improved by the nesting syntax improves code. I’ll be explaining these features in this article.<\/p>\n

Variables<\/h3>\n

SASS makes it possible to include variables in your code. Variables have been a long awaited feature for CSS developers, but have yet to be added to the CSS specification. Variables allow us to reuse common values and enable math functions.<\/p>\n

Variables are defined by using the dollar sign $<\/code> and value assignments are made using the same syntax as CSS.<\/p>\n

\/\/$variableName: value;\r\n$themeColor: #003399;\r\n$maxWidth: 800px;\r\n.article {\r\n    Width: $maxWidth - 200px;\r\n    Background-color:$themeColor;\r\n    Border-color: darken($themeColor, 10%);\r\n}<\/pre>\n
Example: Assigning and using variables in SASS<\/p>\n
Nesting<\/h3>\n
In CSS we must define each rule on a separate line, however with SASS this process is simplified through nesting. Each child selector of a rule can be nested right within the parent. The result is more legible and organized code with less effort. When nesting code the parent element often needs to be included in the selector, in this case the ampersand &<\/code> is used as a shortcut to reference the parent.<\/p>\n
\/* scss *\/\r\nul.widget {\r\n    li {\r\n        font: { size:1.2em; \r\n      weight:italic; }\r\n            a {\r\n            display:block;\r\n            padding:1em;\r\n                background-color: #003366;\r\n            color: #FFF;\r\n         \/\/the & below produces the selector a.error\r\n            &.error {\r\n                background-color: #c00c00;\r\n            font: { size:1.2em; \r\n                  weight:italic; }\r\n            }\r\n        }\r\n    }\r\n\r\n\/* Compiled CSS *\/\r\nul.widget li {\r\n    font-size: 1.2em;\r\n    font-weight: italic;\r\n}\r\n\r\n    ul.widget li a {\r\n        display: block;\r\n        padding: 1em;\r\n        background-color: #003366;\r\n        color: #FFF;\r\n    }\r\n\r\n        ul.widget li a.error {\r\n            background-color: #c00c00;\r\n            font-size: 1.2em;\r\n            font-weight: italic;\r\n        }<\/pre>\n
Example: Nesting with SASS<\/p>\n
Selector Inheritance (@extend)<\/h3>\n
Selector inheritance is helpful when building modular elements. Inheritance gives us the ability to reuse all of the properties from another selector. Once we extend a selector, we can then modify or add more properties to it. The @<\/code>extend<\/code> function is called from within the selector and points to another selector you wish to extend. You can use inheritance multiple times within a selector if you need to.<\/p>\n
\/* scss *\/\r\na.button {\r\n    display:block;\r\n    width: 50px;\r\n    padding: 10px;\r\n    border-radius:5px;\r\n    background-color:#003366;\r\n    color:#FFF;\r\n}\r\n\r\na.submit\r\n{\r\n    @extend a.button;\r\n    background-color: #5da423;\r\n}\r\n\r\n\/* Compiled CSS *\/\r\na.button, a.submit {\r\n  display: block;\r\n  width: 50px;\r\n  padding: 10px;\r\n  border-radius: 5px;\r\n  background-color: #003366;\r\n  color: #FFF; }\r\n\r\na.submit {\r\n  background-color: #5da423; }<\/pre>\n
Example: Selector inheritance with SASS<\/p>\n
Mixins<\/h3>\n
A mixin could be described as a function that returns one or more CSS styles. Mixins are ideal for defining styles that will be reused throughout the style sheet. Mixins can accept arguments to further enhance their functionality and increase reusability.<\/p>\n
\/\/A common mixin for applying border radius\r\n@mixin border-radius ( $value: 10px ) {\r\n\r\n  \/\/use all vendor prefixes\r\n    -webkit-border-radius: $value;\r\n    -moz-border-radius: $value;\r\n    border-radius: $value;\r\n \r\n  \/\/make sure background stays inside box\r\n    -webkit-background-clip: padding-box;\r\n    -moz-background-clip: padding;\r\n    background-clip: padding-box;\r\n}\r\n\r\n\/\/application of the mixin renders an image inside of a complete circle\r\nimg.circle  {\r\n        @include border-radius(50%);\r\n}<\/pre>\n
Example: Simplifiying vendor prefixes using SASS mixins<\/p>\n
SASS integration with Visual Studio<\/h2>\n
The most common way to use SASS is by installing the SASS gem and running SASS as a Ruby application. The SASS application is then configured via command line to watch for changes to an .<\/strong>scss<\/strong> file or files in a directory. Once configured, SASS will detect when a file is changed and automatically compile the SASS code in to native CSS.<\/p>\n
Because SASS is relatively new and is native to the Ruby platform it isn’t supported in Visual Studio by default. While it is possible to install SASS using the common approach described above, much of the functionality expected from Visual Studio is lost when editing SASS code. SASS code will be treated as plain text in Visual Studio, features including: Intellisense, syntax highlighting and document formatting are not available.<\/p>\n
Introduction to Web Workbench<\/h3>\n
Web Workbench is a third-party plugin created by Mindscape that aims to seamlessly integrate SASS development into Visual Studio. With Web Workbench SASS is no longer treated as plain text, and all of the functionalities expected from Visual Studio’s code editor are available. In addition to adding code editor support Web Workbench goes a step further by simplifying SASS installation, automating SASS compilation, and more.<\/p>\n
\n
Web Workbench also adds support for LESS, and Coffee Script, however only SASS will be covered in this article.<\/em><\/p>\n<\/div>\n
Installation<\/h3>\n
Web Workbench is installed by downloading and installing a Visual Studio extension (.vsix) The Web Workbench installation includes all of the dependencies required for SASS. Web Workbench includes its own copy of Ruby and SASS so they are not<\/strong> a prerequisite for installing and using the plugin.<\/p>\n
The installation adds SASS support including:<\/p>\n
    \n
  • New File dialog template<\/li>\n
  • Syntax highlighting<\/li>\n
  • Intellisense<\/li>\n
  • Warnings of syntax errors<\/li>\n
  • Warnings of unknown variables and mixins<\/li>\n
  • Go to variable or mixin definition<\/li>\n
  • CSS file generation<\/li>\n
  • CSS file minification – pro edition only<\/li>\n
  • Convert CSS > SCSS – pro edition only<\/li>\n<\/ul>\n
    \n
    Some of the features discussed throughout this article may only be available in the “pro” version of the software<\/em>.<\/p>\n<\/div>\n
    Using SASS<\/h3>\n
    Adding a new .scss file to your project is done in the same way you would add a normal .css file in Visual Studio, by using the new file dialog. Web Workbench also adds a “New Scss File” context menu to Visual Studio for quick access.<\/p>\n
    With a traditional SASS installation, you would be required to configure the SASS compiler to listen for changes in your project, however Web Workbench does this automatically for you. Any .scss file you create will be compiled automatically each time you make an edit. The .css and minified .min.css files are nested conveniently beneath the .scss file in your solution tree.<\/p>\n
    \"1751-wwb-sass-css-files-86c27ea4-f02e-40\"<\/p>\n
    Web Workbench SASS: scss and the compiled css & minified css<\/p>\n
    Once the code has been compiled the .css is ready to be referenced in your HTML. No additional work needs to be done, Web Workbench will compile and update the .css whenever the .scss is saved.<\/p>\n
    Let’s look at an example of using SASS in ASP.NET MVC.<\/p>\n
    In a new MVC project, begin by adding a new .scss file to the project. To do this, right-click on the Content folder and choose “New Scss File” from the context menu. For this example, we’ll use the default file name Scss1.scss.<\/p>\n
    Let’s create a style that uses variables that we can use to create a color theme. In the file Scss1.scss, we’ll add a few variables to hold our color values. These variables will be available throughout our code and we can use them to theme elements. By using variables we’ll be able to make color changes to the entire project by simply changing the defined value.<\/p>\n
    \"1751-intellisense-bf57f72d-a8c6-4be0-a62\"<\/p>\n
    Intellisense<\/p>\n
    \/* Theme *\/\r\n$primaryColor: #7ac0da; \/\/light blue\r\n$alternateColor: #777; \/\/gray\r\n$accentColor: #000; \/\/white\r\n$foreColor: #000; \/\/white\r\n\r\na.button  {\r\n        display: block;\r\n        padding: 10px;\r\n        border-radius:5px;\r\n        margin-top:10px;\r\n        width:250px;\r\n        background-color: $primaryColor;\r\n        border: 1px solid $accentColor;\r\n      text-align:center;\r\n}\r\ndiv.panel  {\r\n    background-color: $primaryColor;\r\n    color: $foreColor;\r\n      border: 1px solid $accentColor;\r\n    padding:20px;\r\n      a.button  {\r\n        background-color: $alternateColor;\r\n    }\r\n}<\/pre>\n
    Example: Using SASS variables to create a color theme<\/p>\n
    Saving Scss1.scss will trigger the compilation of the CSS and minified CSS files; Scss1.css and Scss1.min.css. The .css or min.css file can now be referenced in the project as you would any static CSS file. Further changes to Scss1.scss will update the compiled .css files.<\/p>\n
    \/\/In MVC4 we reference the file in the BundleConfig.cs\r\nbundles.Add(new StyleBundle(\"~\/Content\/css\").Include(\r\n                \"~\/Content\/site.css\",\r\n                \"~\/Content\/Scss1.css\"\r\n                ));<\/pre>\n
    BundleConfig.cs<\/p>\n
    <head>\r\n        ...\r\n        @Styles.Render(\"~\/Content\/css\")\r\n        <!-- If you're not using the bundler, use the method below -->\r\n        <!-- <link href=\"~\/Content\/Scss1.css\" rel=\"stylesheet\" \/> -->\r\n<\/head>\r\n<div class=\"panel\">\r\n    <p>\r\n        Text\r\n    <\/p>\r\n    <!-- Button inside of a panel -->\r\n    <a href=\"#\" class=\"button\">Button<\/a>\r\n<\/div>\r\n    <!-- Button outside of a panel -->\r\n    <a href=\"#\" class=\"button\">Button<\/a><\/pre>\n
    _Layout.cshtml<\/p>\n
    What is Compass?<\/h3>\n
    Compass is an open source Ruby application that extends the features of SASS. Compass simplifies the use of popular CSS design patterns through its extensible framework of mixins, functions, CSS resets, and other best practices. Compass is a powerful tool which assists developers in building reusable CSS code including widgets, webpages or even CSS frameworks.<\/p>\n
    Compass features<\/h3>\n
      \n
    • CSS3 – A library of CSS3 related mixins that provides cross browser support for CSS properties introduced by CSS3. This module includes support for features like Font face, Box Shadow, Text Shadow, Opacity and Border Radius. When using a mixin from this module, the vendor prefixes are automatically added to the compiled.<\/li>\n
    • Helpers – The helpers module extends the functions provided by SASS. The helpers are a variable collection of functions that short cut many CSS operations, streamline browser compatibility, or do mathematical calculations.<\/li>\n
    • Layout – The layout module assists with building layouts, grids and element positioning.<\/li>\n
    • Reset – A simple implementation of best practices for doing CSS resets.<\/li>\n
    • Typography – This module includes helpful mixins dedicated to typography related tasks including: text placement, white space wrapping, vertical rhythm and more.<\/li>\n
    • Utilities – The utilities module is a collection of mixins that streamlines the styling of common elements. Familiar practices like styling links, lists, tables and text are broken down into common patterns.<\/li>\n<\/ul>\n
      Setting up a Compass project<\/h3>\n
      Compass, like SASS, is traditionally installed using Ruby from the command line. Much like SASS, Visual Studio support for Compass is provided by Web Workbench. To add Compass to a Visual Studio project, select the project from the solution explorer and use the “Setup Compass Project” context menu provided by Web Workbench. When the “Setup Compass Project” command is used, the Compass specific folders: sass<\/strong> and stylesheets<\/strong> are added to the project. In addition to the folders, a Compass configuration file config.rb<\/strong> is added. The config.rb<\/strong> is used to change default behaviors such as input & output folders and minification.<\/p>\n
      Since Compass requires a few conventions that we must follow, it is important to understand how Compass integrates with a project before we begin.<\/p>\n
      The workflow used with Compass is slightly different from using SASS. Compass has its own conventions that may require you to reorganize your project somewhat. This is especially true with ASP.NET MVC because adding Compass to your project will change the folder structure. When you add Compass to your project a sass<\/strong> folder and stylesheets<\/strong> folder will be added to the root folder of the project. All SASS files should reside in the sass<\/strong> folder and files compiled by SASS will be placed in the stylesheets<\/strong> folder by default. Any SASS files which are not stored in the SASS directory may be compiled incorrectly and the output will not be placed in the correct folder.<\/p>\n
      There are two choices to ensure Compass works with your ASP.NET MVC project. The first method is to follow Compass conventions and change the bundlesConfig.cs<\/strong>file to accommodate the new directory structure.<\/p>\n
      \/\/With MVC Conventions\r\nbundles.Add(new StyleBundle(\"~\/Content\/css\").Include(\r\n                \"~\/Content\/site.css\"));\r\n\r\n\/\/With Compass Conventions\r\nbundles.Add(new StyleBundle(\"~\/stylesheets\/css\").Include(\r\n                \"~\/stylesheets\/site.css));<\/pre>\n
      bundleConfig.cs<\/p>\n
      The second method is to modify the config.rb file that was added during the installation of Compass. This will tell Compass to output the compiled CSS to the Content folder used by ASP.NET MVC. This will be the method used in later examples.<\/em><\/p>\n
      # With Compass Conventions\r\n# Set this to the root of your project when deployed:\r\nhttp_path = \"\/\"\r\ncss_dir = \"stylesheets\"\r\nsass_dir = \"sass\"\r\n\r\n# With MVC Conventions\r\n# Set this to the root of your project when deployed:\r\nhttp_path = \"\/\"\r\ncss_dir = \"Content\"\r\nsass_dir = \"sass\"<\/pre>\n
      Using Compass: Grid layout example<\/h3>\n
      To demonstrate using Compass we’ll be developing a re-useable grid layout framework that can be the basis for many projects. Our goal is to use Compass to create a configurable grid system that we can use to layout web applications. The grid will be designed so that can be split in to multiple columns. The width of the columns will be defined by the way that they break up the grid: halves, quarters and thirds. The grid will use variables to determine its overall width, vertical, and horizontal spacing so we can easily adjust the layout.<\/p>\n
      To complete the feature set, we will also make the grid a mobile responsive design by adding a media query which will allow the grid to adapt to mobile devices<\/p>\n
      \"1751-grid-demo-dcdbfd39-4616-4355-82a3-1\"<\/p>\n
      We’ll start by creating a new MVC project and using Web Workbench to configure the project with Compass. In this example, we’ll be using the screen.css file which will be output to the Content directory. Let’s make sure the compiled CSS is added to the bundle config by changing the parameter defined in the BundleConfig.cs. Replace the Site.css<\/strong> reference with screen.css<\/strong>.<\/p>\n
      \/\/screen.css will be generated when screen.scss is saved & compiled\r\nbundles.Add(new StyleBundle(\"~\/Content\/css\").Include(\r\n                \"~\/Content\/screen.css\"));\r\n<\/pre>\n
      Changing the bundle target in BundleConfig.cs<\/p>\n
      Next, we’ll need to tell Compass where we would like to output the compiled CSS. By default the output folder is the stylesheets<\/code>folder. To change the output directory, open config.rb<\/code> and change the css_dir<\/code> from stylesheets<\/code> to Content<\/code>.<\/p>\n
      css_dir = \"Content\"<\/pre>\n
      Changing the Compass output directory in config.rb<\/p>\n
      Open the screen.scss<\/code> file in the scss<\/code> folder. By default, the screen.scss<\/code> file is created during the compass installation and already has a small line of code included. The code @import \"compass\/reset\";<\/code> is a unique reference in Compass: Unlike other import references, referencing reset applies the global reset style sheet. This is not the normal behavior of an imported reference and was implemented this way for simplicity. To examine how this works, save the file. Saving the file will tell Compass to compile, and then we can view the output by opening screen.css in the Content folder. The screen.css will now have about 60 lines of CSS code. The reset code is commonly used as a best practice for resetting the default styles imposed by web browsers.<\/p>\n
      Now that we have added a reset to our style sheet, we’ll need to add a reference to Compass. Open the screen<\/code>.scss<\/code> file and add a reference to Compass to the top of the file. This reference will give us access to all of the features of Compass.<\/p>\n
      @import \"compass\";\r\n@import \"compass\/reset\";<\/pre>\n
      Now we can begin write code for our grid layout. Let’s start by applying the border-box<\/code> model to our style sheet. The border-box model will allow us to use percentage-based widths without having to worry about margins and padding affecting our overall element width. The border-box model will need to be applied to all of the elements on the page, to do this we’ll select all elements with the *<\/code> selector. Inside of this rule we will use a Compass mixin that will create border-box settings that ensures cross browser compatibility.<\/p>\n
      * {\r\n    @include box-sizing(border-box);\r\n}<\/pre>\n
      Screen.scss<\/p>\n
      * {\r\n  -webkit-box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n}<\/pre>\n
      Screen.css output<\/p>\n
      We would like to be able to control the maximum width of our grid and the vertical spacing so that it is easily customizable. We can make these values easily accessible by using variables that we can reference in our style sheet. We’ll add these variables at the top of our style sheet.<\/p>\n
      $layout-width: 1400px;\r\n$vertical-spacing: 20px;<\/pre>\n
      Let’s begin creating our grid. The grid will be used as a container for the column elements that will make up our layout. Start by adding a new .<\/code>grid<\/code> class with a max-width<\/code> of the variable $layout-width<\/code>. Also add a margin to the grid that has a top of 0<\/code>, left and right values set to auto, and a bottom of $vertical-spacing<\/code>.<\/p>\n
      .grid {\r\n    max-width:$layout-width;\r\n    margin: 0 auto $vertical-spacing;\r\n}<\/pre>\n
      Next we’ll use the pie-<\/code>clearfix<\/code> compass mixin to implement a “clearfix”. A clearfix will extend the bottom of the element to enclose any floated elements it contains. The clearfix will ensure that the floated elements within our grid will line up properly. Apply the pie-<\/code>clearfix<\/code> mixin by adding it to the grid class. Save the changes and examine the css output to see how the mixin has generated the clearfix.<\/p>\n
      .grid {\r\n    max-width:$layout-width;\r\n    margin: 0 auto $vertical-spacing ;\r\n    @include pie-clearfix;\r\n}<\/pre>\n
      Screen.scss<\/p>\n
      .grid {\r\n  margin: 0 auto 20px;\r\n  max-width: 1400px;\r\n  *zoom: 1; \/*pie-clearfix*\/\r\n}\r\n.grid:after {\r\n  content: \"\"; \/*pie-clearfix*\/\r\n  display: table; \/*pie-clearfix*\/\r\n  clear: both; \/*pie-clearfix*\/\r\n}<\/pre>\n
      Screen.css output (the \/*pie-clearfix*\/ comments above were added for demonstration purposes)<\/p>\n
      Our grid is now complete and we are ready to create the styles for the columns which will be added to the grid. The columns will be defined by how much of the grid’s width they occupy. We will start by breaking the grid down in to full and half width sections. Each column will be floated and given a horizontal spacing white space or gutter. To continue with the customizable nature of our grid layout, we’ll give our gutter a variable so it can be easily changed.<\/p>\n
      Let’s begin by adding the gutter variable to the top of our style sheet with a value of 24px.<\/p>\n
      $gutter: 24px;<\/pre>\n
      Now that we have our gutter value, we can apply it to all of the columns. Within the grid, nest a column class called .<\/code>col<\/code> and set it’s float value to left. Set the top and bottom padding of the .col<\/code> to 0<\/code> and the left and right padding to $gutter<\/code>.<\/p>\n
      .grid {\r\n    max-width:$layout-width;\r\n    margin: 0 auto $vertical-spacing ;\r\n    @include pie-clearfix;\r\n    .col {\r\n        float: left;\r\n        padding: 0 $gutter; \r\n    }\r\n}<\/pre>\n
      Next, we’ll define the column widths, we’ll use the &<\/code> parent selector to describe how the .col style should be inherited. Add a full width column to the grid style and give it a width value of 100%<\/code>. Continue by adding a half width column that has a width value of 50%<\/code>.<\/p>\n
      .col {\r\n    float: left;\r\n    padding: 0 $gutter;\r\n    &.full {\r\n        width:100%;\r\n        }\r\n    &.half {\r\n        width: 50%;\r\n        }\r\n    }\r\n}<\/pre>\n
      Screen.scss<\/p>\n
      .grid .col {\r\n  float: left;\r\n  padding: 0 24px;\r\n}\r\n.grid .col.full {\r\n  width: 100%;\r\n}\r\n.grid .col.half {\r\n  width: 50%;\r\n}<\/pre>\n
      Screen.css output<\/p>\n
      The grid is now complete enough that we can apply it to some HTML. Let’s add a style that will help us visualize the grid and then write the markup to demonstrate how the grid will work. In the screen.scss<\/code> we’ll add styles for the h1<\/code>, h2<\/code> and h3<\/code> elements, we’ll use these to show the columns. Give the h<\/code> tags a background color of #<\/code>eee<\/code><\/code>and a padding of 20px<\/code>.<\/p>\n
      h1, h2, h3 {\r\n    \/\/for debugging our grid\r\n    padding:20px;\r\n    background-color:#eee;\r\n}<\/pre>\n
      Screen.scss<\/p>\n
      We’ll be replacing the HTML provided in the MVC template and displaying our grid. Open the _<\/code>layout.cshtml<\/code> file and remove any the template code from the body section, leaving only the @<\/code>RenderBody<\/code> method.<\/p>\n
      <body>\r\n        @RenderBody()\r\n<\/body><\/pre>\n
      _layout.cshtml<\/p>\n
      Next, open the index.cshtml<\/code> file and clear out all of the code. We’ll place our grid code here so we can view our progress. In the index.cshtml<\/code> file add a new div<\/code> element with the class set to grid<\/code>, this will be our container. Inside the grid add a div<\/code> and make it a full width column by adding applying the col full<\/code> class. Add an h1 to the column and give it the text “Full Width”. Run the project to view the demo.<\/p>\n
      <div class=\"grid\">\r\n    <div class=\"col full\">\r\n        <h1>Full Width<\/h1>\r\n    <\/div>\r\n<\/div><\/pre>\n
      Index.cshtml<\/p>\n
      Let’s continue by adding a two column grid to our demo. Append another grid and inside create two div<\/code> elements with the class col half<\/code>. Include an h2<\/code> tag in each column with the text “Half Width”.<\/p>\n
      <div class=\"grid\">\r\n    <div class=\"col half\">\r\n        <h2>Half Width<\/h2>\r\n    <\/div>\r\n    <div class=\"col half\">\r\n        <h2>Half Width<\/h2>\r\n    <\/div>\r\n<\/div><\/pre>\n
      Index.cshtml<\/p>\n
      \"1751-half-width-f033cae5-e00a-4dcd-966e-\"<\/p>\n
      Let’s complete give our grid layout more column options by adding quarter, one thirds, and two thirds with columns. Continuing from the &.<\/code>half<\/code> column class add three new classes, &.<\/code>quarter<\/code>, &.<\/code>third<\/code> and &.<\/code>two-thirds<\/code>. Set the width to 25%<\/code>, 33.33%<\/code> and 66.66%<\/code> respectively.<\/p>\n
      .col {\r\n    float: left;\r\n    padding: 0 $gutter;\r\n    &.full {\r\n        width:100%;\r\n    }\r\n    &.half {\r\n        width: 50%;\r\n    }\r\n    &.quarter {\r\n        width: 25%;\r\n    }\r\n    &.third {\r\n        width: 33.33%;\r\n    }\r\n    &.two-thirds {\r\n        width: 66.66%;\r\n    }\r\n}<\/pre>\n
      Screen.scss<\/p>\n
      Using the same conventions as before, we’ll add the new column classes to our demo and show how they can be used together. Create a new grid that has one half width column and two quarter width columns. Below, create a grid with a third and two thirds columns.<\/p>\n
      <div class=\"grid\">\r\n    <div class=\"col half\">\r\n        <h2>Half Width<\/h2>\r\n    <\/div>\r\n    <div class=\"col quarter\">\r\n        <h2>Quarter Width<\/h2>\r\n    <\/div>\r\n    <div class=\"col quarter\">\r\n        <h2>Quarter Width<\/h2>\r\n    <\/div>\r\n<\/div>\r\n<div class=\"grid\">\r\n    <div class=\"col third\">\r\n        <h2>Third Width<\/h2>\r\n    <\/div>\r\n    <div class=\"col two-thirds\">\r\n        <h2>Two Thirds Width<\/h2>\r\n    <\/div>\r\n<\/div><\/pre>\n
      Index.cshtml<\/p>\n
      \"1751-thirds-8399723c-1d0e-4d1b-b1af-134e\"<\/p>\n
      To further extend the control over our columns, it is now time to add the ability to nest grids within each other. To do this we’ll need to offset the gutters and vertical spacing when it is nested within another grid. Since we already have our gutter value stored in a variable we can reuse it when defining our offset. Inside of the .col<\/code> class add a .grid class with a vertical margin of 0<\/code> and horizontal margin of negative $gutter<\/code>.<\/p>\n
      .grid {\r\n    ...\/\/grid code\r\n    .col {\r\n    ...\/\/columns code\r\n    }\r\n    \/\/ nested grid\r\n    .grid {\r\n    margin: 0 (-($gutter));\r\n    }\r\n}<\/pre>\n
      Screen.scss Truncated to save space<\/p>\n
      .grid .col .grid {\r\n  margin: 0 -24px;\r\n}<\/pre>\n
      Screen.css output<\/p>\n
      Let’s display this new feature by adding to our existing grid demo. Create a new grid with two columns; the first column will be two thirds width and a second column one third. Inside the first column, add a new grid that contains four quarter width columns. In each of the quarter width columns add an h3<\/code> with the text “Quarter Width” and in the one thirds width column add an h3<\/code> with the text “Third Width”.<\/p>\n
      <div class=\"grid \">\r\n    <div class=\"col two-thirds\">\r\n        <div class=\"grid \">\r\n            <div class=\"col quarter\">\r\n                <h3>Quarter Width<\/h3>\r\n            <\/div>\r\n            <div class=\"col quarter\">\r\n                <h3>Quarter Width<\/h3>\r\n            <\/div>\r\n            <div class=\"col quarter\">\r\n                <h3>Quarter Width<\/h3>\r\n            <\/div>\r\n            <div class=\"col quarter\">\r\n                <h3>Quarter Width<\/h3>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"col third\">\r\n        <div class=\"display\">\r\n            <h3>Third Width<\/h3>\r\n        <\/div>\r\n    <\/div><\/pre>\n
      \"1751-nested-7c8b25c0-41e1-45ab-bead-20a4\"<\/p>\n
      Index.cshtml<\/p>\n
      To wrap up our list of features, let’s convert our layout to a responsive web design. Continuing with our goal of making the layout configurable, we’ll provide a variable which will determine the screen size at which the layout becomes responsive.<\/p>\n
      For small screen mobile devices we’ll stack the columns top to bottom instead of side by side. We can accomplish this by adding a media query and overriding the floats, padding and margins on our grid and columns. We’ll use the variable as the breakpoint for our media query.<\/p>\n
      At the top of the style sheet add the variable $small-device-width<\/code> and give it a value of 767px<\/code>.<\/p>\n
      $small-device-width:767px;<\/pre>\n
      Screen.scss<\/p>\n
      Append a media query to the bottom of the style sheet. Inside the media query set the columns to float to none !<\/code>important<\/code>,width to auto important<\/code>! and padding to 0<\/code>. In addition, set the nested grid margin to 0. Placement of the media query is important because if it does not appear at the end of the file it may get overridden and it will not be applied.<\/p>\n
      @media only screen and (max-width: $small-device-width) {\r\n  \/* Small Device Styles here *\/\r\n    .grid .col {\r\n        float:none;\r\n        width: auto !important;\r\n        padding: 0 !important;\r\n        \/\/ nested grid\r\n        .grid {\r\n            margin: 0;\r\n        }\r\n    }\r\n}<\/pre>\n
      Screen.scss<\/p>\n
      Wrap up<\/h3>\n
      SASS and Compass are great tools for writing CSS code. Currently there is only third party support through the use of Web Workbench. SASS provides useful functionality currently unavailable in standard CSS. Variables, mixins and functions promote DRY methodologies when writing CSS code. Compass extends SASS even further through the use of convention and its wide array of mixins. We demonstrated how these tools come together by creating a customizable grid layout.<\/p>\n
      \n
      The grid layout example is available on <\/em>GitHub<\/em>. Web Workbench is required to run the code.<\/em> 
       https:\/\/github.com\/EdCharbeneau\/SimpleCompassMVCExample<\/em><\/a><\/p>\n<\/div>\n
      Resources<\/h3>\n