I have couple of CSS classes in my SCSS file:
#close {
position:absolute;
background:url(../images/close.png) 0 0 no-repeat;
width:30px;
height:30px;
display:block;
top:-15px;
right:-15px;
float: right;
margin: 0;
padding: 0
}
#close:hover {
background:url(../images/close_hover.png) 0 0 no-repeat;
}
I am wondering if it is possible to replace the image references in this SCSS file with classes that are residing in a different SCSS file that's generated for image sprites.
.modal_close { width: 33px; height: 33px; background-position: 0 0 }
.modal_close_hover { width: 33px; height: 33px; background-position: -390px -51px }
Related
QUESTION: Is it possible to use a SCSS list to generate a number of classes without repeating the attributes?
The point is to keep the file easy maintainable by have ONE list ($svgs) of names which then can be used for classes or variables (see example below, $svg). This list is much larger in reality.
Note that I can't use .box i[class*=".icon-"] or similar selectors, as there are other elements that would be affected.
Here's the current SCSS, which works, but creates bloated CSS. .
$svgs: cancel, danger, exit;
#each $svg in $svgs {
.box i.icon- {
&#{$svg} {
background-image: url($svg + '.svg');
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
}
}
Result CSS is:
.box i.icon-cancel {
background-image: url("cancel.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-danger {
background-image: url("danger.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-exit {
background-image: url("exit.svg");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
Desired CSS:
.box i.icon-cancel, .box i.icon-danger, .box i.icon-exit {
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.box i.icon-cancel {
background-image: url("cancel.svg");
}
.box i.icon-danger {
background-image: url("danger.svg");
}
.box i.icon-exit {
background-image: url("exit.svg");
}
To get this result you can use #extend with a placeholder selector:
$svgs: cancel, danger, exit;
%svg-styles {
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
}
#each $svg in $svgs {
.box i.icon- {
&#{$svg} {
#extend %svg-styles;
background-image: url($svg + '.svg');
}
}
}
First time using SCSS, and testing my knowledge from the Sass-Lang.com guide. According to the guide, it is possible to both set variables and use mixins to simplify your CSS.
I was coding an animation where the div is clipped from bottom to top. I used variables to set the initial and final clip-path settings, and used them while calling a mixin. Yet I get the error, 'Invalid CSS after "...slider-initial)": expected "{", was "; }"'. What am I doing wrong?
Here is my code:
<body>
<section id='main'>
<div id='left'></div>
<div id='right'></div>
<section>
</body>
$slider-initial: inset(0 0 0 0);
$slider-final: inset(0 0 100% 0);
#mixin slider-clip($slider-state) {
-webkit-clip-path: $slider-state;
clip-path: $slider-state;
}
body {
height: 100%; width: 100%;
margin: 0 auto;
}
#main {
height: 64vh; width: 38vw;
margin: 0 auto;
margin-top: 10%;
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
border: 1vh solid black;
}
#left {
order: 1;
width: 4%;
height: 100%;
margin-left: 46%;
background: green;
}
#right {
opacity: 1;
order: 2;
width: 4%;
height: 100%;
margin: auto;
margin-left: 0;
animation-name: dropdown;
animation-duration: 4s;
background: red;
}
#keyframes dropdown {
from { #mixin slider-clip($slider-initial); }
to { #mixin slider-clip($slider-final); }
}
You called your mixin in a wrong way:
#keyframes dropdown {
from { #mixin slider-clip($slider-initial); }
to { #mixin slider-clip($slider-final); }
}
In the guide on sass-lang.com, you can see the following example of how to include a mixin:
.box { #include border-radius(10px); }
Applied to your case, your code should look like this:
#keyframes dropdown {
from { #include slider-clip($slider-inital); }
to { #include slider-clip($slider-final); }
}
I've just been practicing making some mixins, which at the moment are very basic but just do some simple tasks.
I've made a mixin that I can call in which turns child elements into inline-block elements instead of floats, so that the parent can use text-align to center the elements as things shrink responsively.
The problem I have is this was working fine, but since tweaking it, it doesn't seem to work as it did. I'll provide a working example below. In my example when 3 per row are set, I'm only getting two per row.
My initial thoughts are that it might be extra space created by inline-block? Although my vertical-align: top; was to negate that.
HTML
<div id="site-wrap">
<div class="list__wrap">
<div class="list__item">1</div>
<div class="list__item">2</div>
<div class="list__item">3</div>
<div class="list__item">4</div>
<div class="list__item">5</div>
<div class="list__item">6</div>
<div class="list__item">7</div>
<div class="list__item">7</div>
</div>
</div>
SCSS
// The mighty Mixin...
#mixin list-grid($per-row, $spacing, $child, $prefix){
margin: 0 em(-$spacing/2);
#include clearfix;
//if a class
#if $prefix == 'class' {
> .#{$child}{
width: 100%/$per-row;
//position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
}
}
#if $prefix == 'id' {
> ##{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
}
}
#if $prefix == 'none' {
> #{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
word-wrap: break-word;
}
}
}
//start of our styles
#site-wrap{
max-width: 1020px;
margin: 0 auto;
background: {
color: Black;
}
}
.list__wrap{
#include clearfix;
// Call in our mixin on the inner divs
#include list-grid(3, 10, list__item, class);
// We can use text-align to center the list when it's shrinking down
text-align: center;
.list__item{
background: {
color: Tomato;
}
}
}
Working example: http://codepen.io/vdecree/pen/wuExl
I think I found a solution that is not as icky as having to format the HTML in a certain way. Rather that use font-size: 0; on the parent (because this broke my negative margins) — you can use letter-spacing: -0.31em;
// The mighty Mixin...
#mixin list-grid($per-row, $spacing, $child, $prefix){
margin: 0 em(-$spacing/2);
#include clearfix;
letter-spacing: -0.31em;
//if a class
#if $prefix == 'class' {
> .#{$child}{
width: 100%/$per-row;
font-size: 16px;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
#if $prefix == 'id' {
> ##{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
#if $prefix == 'none' {
> #{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
letter-spacing: 0;
word-wrap: break-word;
}
}
}
Source
I have problem with Sass and this is connected with creating sprites and then reusing compiled class later.
This my styles.scss:
#import 'buttons/*.png';
#include all-buttons-sprites;
#import 'partial/buttons';
And this is buttons.scss:
.buttons {
#extend .buttons-blue-button;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
cursor: pointer;
border: none;
font-size: 18px;
width: 242px;
height: 45px;
font: sky-text-med;
padding-bottom: 5px;
margin: 24px 4px 14px;
opacity: 0;
}
Compass not saying any errors but compile css is showing:
.buttons-sprite, .buttons-blue-button, .buttons, .buttons-blue-hover-button, .buttons-yellow-button, .buttons .yellow, .buttons-yellow-hover-button {
background: url('/welcome/assets/img/buttons-s5afcdf1a60.png') no-repeat; }
.buttons-blue-button, .buttons {
background-position: 0 0; }
.buttons {
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
cursor: pointer;
border: none;
font-size: 18px;
width: 242px;
height: 45px;
font: sky-text-med;
padding-bottom: 5px;
margin: 24px 4px 14px;
opacity: 0; }
But there is missing background with should be set by #extend .buttons-blue-button;
Why this isn't happening ?
.buttons {
#extend .buttons-blue-button;
...
}
You are telling the .button class to extend the .button-blue-button class.
.buttons-sprite, .buttons-blue-button, .buttons, .. {
background: url('/welcome/assets/img/buttons-s5afcdf1a60.png') no-repeat;
}
.buttons-blue-button, .buttons {
background-position: 0 0;
}
Compass is not making mistakes here, the background-image was set, the background-position was set too. Your expectations/assumptions & css-properties are Simply wrong.
Example site
I have a site divided into your usual vertical sections. Header and footer both contain backgrounds with background-attachment: fixed. I have a slide-out nav, which you can see is activated on the first link. Everything works dandy except...
Issue:
Safari 6 (I'm not sure about 5.1, but it seems to be on Mac as my Windows Safari doesn't have the issue) has a nasty flicker upon animation. This can be resolved with the usual -webkit-backface hack HOWEVER upon using this, a new problem arises. The fixed background images start behaving very badly, and if you scroll/resize the browser enough, the images get distorted or content overlays improperly. Is there an alternative method I can use for this technique, or an actual fix?
HTML
<section>Hi CLICKME</section>
<section>hi</section>
<section>hi</section>
<section>hi</section>
<footer><p>I am some text</p></footer>
<aside class="menu">
I'm a menu.
</aside>
CSS
body {
background: #222;
transition: all 0.3s;
-webkit-backface-visibility: hidden;
}
body.bump {
transform: translate(-258px, 0);
}
section {
background: #CBA;
color: white;
line-height: 450px;
font-size: 32px;
height: 500px;
position: relative;
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
z-index: 1;
}
section:nth-child(2) {
background: #FAFAFA;
}
section:nth-child(3) {
background: #CCC;
}
section:nth-child(4) {
background: #ABC;
}
section:first-child {
background: url(http://placekitten.com/1600/500) center top;
background-attachment: fixed;
-webkit-backface-visibility: hidden;
}
#media all and (min-width: 73.75em) {
section:first-child {
background-size: cover;
}
}
footer {
background: url(http://placekitten.com/1400/500) center top;
background-attachment: fixed;
color: white;
font-size: 32px;
height: 500px;
}
#media all and (min-width: 73.75em) {
footer {
background-size: cover;
}
}
footer p {
position: fixed;
bottom: 200px;
left: 0;
text-align: center;
width: 100%;
}
aside.menu {
background: #222;
color: #FFF;
height: 100%;
padding-top: 30px;
position: fixed;
top: 0;
right: 0;
text-align: left;
transform: translate(516px, 0);
transition: all 0.3s;
width: 258px;
-webkit-backface-visibility: hidden;
}
.bump aside.menu {
transform: translate(258px, 0);
}
JS (using Jquery)
$('section a').click( function(e) {
$('body').toggleClass('bump');
});
I did a workaround, by applying the fixed background to the body, wrapping everything in body in another div (animating that instead, so it wasn't affecting the body background) and the footer stayed the same, since having scrolled that far there is no way to pop the sidebar out anyway (so no animation flicker to worry about).