• Hey

    I installed scss 1.2.4

    Folder structure seems to be in order
    library
    /css
    /scss

    and now what?

    Basically what I want is to add this scss to my tables and I am lost in SASS Compass and I dont know what documentation.

    /********************************/
    /*********** Tables *************/
    /********************************/
    
    /* Responsive Tables - Block  */
    /*
    table, thead, tbody, tfoot, tr, td, th, caption {
      display: block;
    }
    */
    
    @import "compass/css3";
    
    @import "compass/css3";
    @import url(https://fonts.googleapis.com/css?family=Patua+One|Open+Sans);
    
    * { 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
        box-sizing: border-box; 
    }
    
    table.size-chart {
      border-collapse: separate;
      border-bottom: 2px solid #00cccc;
      background: inherit;
      @include border-radius(5px);
      margin:50px auto;
      @include box-shadow(0px 0px 5px rgba(0,0,0,0.3));
        box-shadow: 0px 0px 20px rgba(0,0,0,0.10),
         0px 10px 20px rgba(0,0,0,0.05),
         0px 20px 20px rgba(0,0,0,0.05),
         0px 30px 20px rgba(0,0,0,0.05);
    }
    
    thead.size-chart {
      @include border-radius(5px);
    }
    
    thead.size-chart th.size-chart {
      font-family: 'Patua One', cursive;
      font-size:16px;
      font-weight:400;
      color:#fff !important;
      @include text-shadow(1px 1px 0px rgba(0,0,0,0.5));
      text-align:left;
      padding:20px;
      @include background-image(linear-gradient(#646f7f, #4a5564));
      border-top:1px solid #858d99;
      
      &:first-child {
       @include border-top-left-radius(5px); 
      }
    
      &:last-child {
        @include border-top-right-radius(5px); 
      }
    }
    
    tbody.size-chart tr.size-chart td.size-chart {
      font-family: 'Open Sans', sans-serif;
      font-weight:400;
      color:#5f6062;
      font-size:12px;
      padding:20px 20px 20px 20px;
      border-bottom:1px solid #e0e0e0;
      
    }
    
    tbody.size-chart tr.size-chart:nth-child(2n) {
      background:#f0f3f5;
    }
    
    tbody.size-chart tr.size-chart:last-child td.size-chart {
      border-bottom:none;
      &:first-child {
        @include border-bottom-left-radius(5px);
      }
      &:last-child {
        @include border-bottom-right-radius(5px);
      }
    }
    
    tbody.size-chart:hover > tr td {
      @include opacity(0.5);
      
      /* uncomment for blur effect */
      /*color:transparent;
      @include text-shadow(0px 0px 2px rgba(0,0,0,0.8));
    }
    */
    	
    tbody:hover > tr:hover td {
      @include text-shadow(none);
      color:#2d2d2d;
      @include opacity(1.0);
    }

    Please help

  • The topic ‘New to scss – How to start’ is closed to new replies.