Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Jimi Wikman
    Jimi Wikman

    SASS CSS - nästla selektorer

    Sign in to follow this  

    I serien om preprocessorn SASS så tittar vi idag på hur SASS kan nästla selektorer så vi inte behöver skriva alla varianter och så att vi på ett snyggt och enkelt sätt kan gruppera selektorer som hör till en viss huvudklass.

     

    Normal när vi skriver klasser och selektorer så skriver vi dem i en tydlig ordning så att vi går utifrån och in mot en specifik klass. Ibland kan det bli lite traggligt att alltid skriva ut alla selektorerna som kan se ut så här:

    nav ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

     

    nav li {

    display: inline-block;

    }

     

    nav a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

    }

    Istället för att hela tiden skriva ut nav och sedan selektorerna under nav så kan vi SASS nästla koden på ett väldigt smidigt sätt:

    nav {

    ul {

    margin: 0;

    padding: 0;

    list-style: none;

    }

     

    li { display: inline-block; }

     

    a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

    }

    }

    Som du ser så lägger vi selektorerna inuti nav och det ger sedan en CSS kod som blir precis som den ovan. Detta gör att vi mycket enklare kan jobba med CSS i SASS utan att förlora möjligheten till nästlad CSS.

     

     

    Sign in to follow this  


    User Feedback

    Recommended Comments

    There are no comments to display.



    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


  • Who's Online   0 Members, 0 Anonymous, 11 Guests (See full list)

    There are no registered users currently online

×
×
  • Create New...