New to scss – How to start
-
Hey
I installed scss 1.2.4
Folder structure seems to be in order
library
/css
/scssand 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.