Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Mājasdarbs</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-1"></div>
                <div class="col-sm-2">
                    <h2>Contents</h2>
                    <p><a href="#mi">Major implementations</a></p>
                    <p><a href="#feat">Features</a></p>
                    <p><a href="#var">Variables</a></p>
                    <p><a href="#nes">Nesting</a></p>
                    <p><a href="#si">Selector inheritance</a></p>
                    <p><a href="#ide">IDE intergation</a></p>
                    <p><a href="#vid">Video</a></p>
                </div>
                <div class="col-sm-7 text-justify">
                    <h1>Sass</h1>
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/220px-Sass_Logo_Color.svg.png" class="rounded float-right" alt="Sass logo">
                    <h5 class="font-weight-light"><i>Sass</i> (short for <i>syntactically awesome style sheets</i>) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum. After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files.</h5>
                    <p>Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax," uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.</p>
                    <p>CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternatively, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved.</p>
                    <p>CSS3 supports external style sheets. This technique allows you to define a style sheet as a separate document and import it into your web pages using a <link> tag.</p>
                    <h2 id="mi">Major implementations</h2>
                    SassScript was implemented in multiple languages, the noteworthy implementations are:

                    The original open-source Ruby implementation created in 2006, since deprecated due to the lack of maintainers and reached End-of-Life in March 2019.
                    The official open-source Dart implementation.
                    libSass, the official open-source C++ implementation.
                    the official JavaScript implementation, published as "sass" module on npm.
                    JSass, an unofficial Java implementation.
                    phamlp, an unofficial SASS/SCSS implementation in PHP.
                    Vaadin has a Java implementation of Sass.
                    Firebug, a Firefox XUL ("legacy") extension for web development. It has been since deprecated in favor of developer tools integrated into Firefox itself. It stopped working since Firefox 57 dropped support for XUL extensions.
                    <h2 id="feat">Features</h2>
                    <h2 id="var">Variables</h2>
                    Sass allows variables to be defined. Variables begin with a dollar sign ($). Variable assignment is done with a colon (:).

                    SassScript supports four data types:

                    Numbers (including units)
                    Strings (with quotes or without)
                    Colors (name, or names)
                    Booleans
                    Variables can be arguments to or results from one of several available functions. During translation, the values of the variables are inserted into the output CSS document.

                    In SCSS style

                    $primary-color: #3bbfce;
                    $margin: 16px;

                    .content-navigation {
                      border-color: $primary-color;
                      color: darken($primary-color, 10%);
                    }

                    .border {
                      padding: $margin / 2;
                      margin: $margin / 2;
                      border-color: $primary-color;
                    }
                    Would compile to:

                    .content-navigation {
                      border-color: #3bbfce;
                      color: #2b9eab;
                    }

                    .border {
                      padding: 8px;
                      margin: 8px;
                      border-color: #3bbfce;
                    }
                    <h2 id="nes">Nesting</h2>
                    CSS does support logical nesting, but the code blocks themselves are not nested. Sass allows the nested code to be inserted within each other.

                    In SCSS style

                    table.hl {
                      margin: 2em 0;
                      td.ln {
                        text-align: right;
                      }
                    }

                    li {
                      font: {
                        family: serif;
                        weight: bold;
                        size: 1.3em;
                      }
                    }
                    Would compile to:

                    table.hl {
                      margin: 2em 0;
                    }
                    table.hl td.ln {
                      text-align: right;
                    }

                    li {
                      font-family: serif;
                      font-weight: bold;
                      font-size: 1.3em;
                    }
                    Loops
                    Sass allows for iterating over variables using @for, @each and @while, which can be used to apply different styles to elements with similar classes or ids.

                    $squareCount: 4
                    @for $i from 1 through $squareCount
                      #square-#{$i}
                       background-color: red
                       width: 50px * $i
                       height: 120px / $i
                    The above example would compile to:

                    #square-1 {
                      background-color: red;
                      width: 50px;
                      height: 120px;
                    }

                    #square-2 {
                      background-color: red;
                      width: 100px;
                      height: 60px;
                    }

                    #square-3 {
                      background-color: red;
                      width: 150px;
                      height: 40px;
                    }
                    <h2 id="si">Selector inheritance</h2>
                    While CSS3 supports the Document Object Model (DOM) hierarchy, it does not allow selector inheritance. In Sass, inheritance is achieved by inserting a line inside of a code block that uses the @extend keyword and references another selector. The extended selector's attributes are applied to the calling selector.

                    .error
                      border: 1px #f00
                      background: #fdd

                    .error.intrusion
                      font-size: 1.3em
                      font-weight: bold

                    .badError
                      @extend .error
                      border-width: 3px
                    Would compile to:

                    .error, .badError {
                      border: 1px #f00;
                      background: #fdd;
                    }

                    .error.intrusion,
                    .badError.intrusion {
                      font-size: 1.3em;
                      font-weight: bold;
                    }

                    .badError {
                      border-width: 3px;
                    }
                    <h2 id="ide">IDE integration</h2>
                    IDE	Software	website
                    Adobe Dreamweaver CC 2017		https://blogs.adobe.com/creativecloud/getting-started-with-css-preprocessors-less-and-sass/
                    Eclipse
                    Emacs	SCSS Mode	https://github.com/antonj/scss-mode/
                    JetBrains IntelliJ IDEA (Ultimate Edition)		https://www.jetbrains.com/idea/
                    JetBrains PhpStorm		http://www.jetbrains.com/phpstorm/
                    Microsoft Visual Studio	Mindscape	http://www.mindscapehq.com/products/web-workbench
                    Vim	haml.zip	http://www.vim.org/scripts/script.php?script_id=1433
                    <h2 id="vid">Video</h2>
                    Before you start working with Sass, it's worth watching an online tutorial about it. The tutorial was published on Youtube.


                    Credits
                    This homework was created by [put your name here] on [put current date and time here].
                </div>
                <div class="col-sm-2"></div>
            </div>
        </div>


    </body>
</html>