everyone.
I start to learn how to use SASS and Compass and whant to ask advice in better organizing this snippet of code
.main-link.first-item {
#include background(image-url($bg-sprite) no-repeat -27px -39px,
linear-gradient(#4b4e58, #3f424a));
&:hover {
#include background(image-url($bg-sprite) no-repeat -27px -1px,
linear-gradient(#4b4e58, #3f424a));
}
How can I use linear gradient without repeting, but only changing position of image?
You just need to adjust the background position of the first image.
&:hover {
background-position: -27px -1px, 0 0;
}
I agree with #cimmanon's answer.
Although if you want to use the same thing over and over again on different elements in different stylesheets I would propose to create a mixin and put it into a separate sass file. Than you can import that into the files where you need it:
# mixin.css.scss
#mixin custom-background($bg-sprite, $position-vertical, $position-horizontal) {
#include background(image-url($bg-sprite) no-repeat $position-vertical $position-horizontal,
linear-gradient(#4b4e58, #3f424a));
}
# some.css.scss
#import "mixin.css.scss"
.main-link.first-item {
#include custom-background($bg-sprite, -27px, -39px);
&:hover {
#include custom-background($bg-sprite, -27px, -1px);
}
}
Related
tldr: how to avoid repetition of ".well" selector in below example.
I am using bootstrap and sass to display a "well" div with a shape and with a gradient fill. This may not be a proper use of wells and I'd welcome other suggestions as to how to draw circular/rectangular divs with X% shaded (ideally where X is any integer. [0, 100]) but, for now, I am most interested in whether it's possible in SASS to get rid of the repetition of ".well". I tried using "&" but it would reverse .some_container too and I only wanted to reverse the immediate .inner_container parent to apply there (e.g. .inner_container.round). [There is one outer_container and multiple inner_containers. Each inner_container has one well.]
.outer_container {
.inner_container {
&.round .well {
border-radius: 50%;
}
&.barely_filled .well {
#include gradient-horizontal(sienna, $well-bg, 0%, 25%);
}
&.half_filled .well {
#include gradient-horizontal(sienna, $well-bg, 0%, 50%);
}
&.fairly_filled .well {
#include gradient-horizontal(sienna, $well-bg, 0%, 75%);
}
&.mostly_filled .well {
background-color: sienna;
}
}
}
The most terse way to write it would be like this:
#mixin well($sel) {
&#{$sel} .well {
#content;
}
}
.outer_container {
.inner_container {
#include well('.round') {
border-radius: 50%;
}
#include well('.barely_filled') {
test: 1;
}
#include well('.half_filled') {
test: 2;
}
#include well('.fairly_filled') {
test: 3;
}
#include well('.mostly_filled') {
background-color: sienna;
}
}
}
However, in addition to being more verbose, I feel that this decreases readability over what you currently have.
I am looking to develop this mixin further, so I can pass multiple arguements through the mixin without having to re-create the include every time e.g:
NOT THIS:
#include main-container(red);
#include main-container(blue);
BUT THIS:
#include main-container(red, blue);
Current Code
#mixin main-container-bg($name){
&.#{$name}-bg{
background:url("/images/"#{$name}"-angle-bg.png") center 78px no-repeat;
}
}
I believe I need a for statement alongside an each statement to loop my mixin though all of the arguments in the #include later in the scss.
Any idea's?
Any help is welcomed.
-Neil
You could use the #each directive and pass a list to the mixin in this way
#mixin main-container-bg($listcolours) {
#each $colour in $listcolours {
&.#{$colour}-bg{
background:url(/images/#{$colour}-angle-bg.png) center 78px no-repeat;
}
}
}
div {
#include main-container-bg((red, blue));
}
The generated CSS is
div.red-bg {
background: url(/images/red-angle-bg.png) center 78px no-repeat;
}
div.blue-bg {
background: url(/images/blue-angle-bg.png) center 78px no-repeat;
}
Succinctly, By using Susy's at-breakpoint responsive mixin, is there a way or function to include an external CSS file in the body of the breakpoint call?
Something like this:
.page {
border: 1px dashed #000;
height: 650px;
#include container;
.content {
color: red;
text-align: center;
border: 1px dashed red;
height: 400px;
#include span-columns(4 omega, 6);
.main {
color: green;
border: 1px dashed green;
text-align: center;
#include span-columns(1, 2);
}
.secondary {
color: blue;
border: 1px dashed blue;
#include span-columns(2, 3);
}
}
#include at-breakpoint(800px 8 250px) {
#include container;
.content {
#include span-columns(1, 1);
}
//IMPORT or INCLUDE CSS FILE HERE somehow...
} //end of breakpoint
}
I was hoping it was possible, because that'd be a whole lot cleaner than writing all the CSS rules I wish to be applied right there inline. Let me know if it's possible or what's the best practice in this case.
Thank you!
Sure. This isn't really a question about Susy, so much as a question about Sass. The same answers are true for working in the context of any wrapping mixin.
You can only import files at the root level (for now, at least) — but that's not your only option. I've seen people write all their site styles inside mixins, and then simply include those mixins as needed:
#mixin medium-layout {
// your medium css
}
.page {
#include at-breakpoint($medium) {
#include medium-layout;
}
}
You can use as many mixins as you like, call them whatever you want, and put them in other files (as long as you #include those files before calling the mixins).
I use a different approach. Rather than nesting everything under a .page selector, with big groups for each breakpoint, I break things up into modules, and keep the breakpoint styles attached to each module as needed.
// _main.scss
.main {
color: green;
#include at-breakpoint($medium) { /* changes to main */ }
}
// _secondary.scss
.secondary {
color: blue;
#include at-breakpoint($medium) { /* changes to secondary */ }
}
From a mobile-first perspective, where breakpoint styles may need to override or build on existing styles, this keeps all the related code in one place.
how to generate sprite with fewest empty space using compass sass?
I can not find any setting option to get smart layout for sprit-map function.
but I find that
$dropcap-layout:smart
#import "dropcap/*.png";
can do the job.
but not for sprite-map function.anyone help?
$map: sprite-map("sprite_common/*.png");
%sprite_common{
background-image: sprite-url($map);
background-repeat: no-repeat;
}
#mixin common_output($sprite){
#extend %sprite_common;
width: image-width(sprite-file($map, $sprite));
height: image-height(sprite-file($map, $sprite));
background-position: sprite-position($map,$sprite);
}
.top_tabs .arrow{
#include common_output(checkout_setting__crumb_arrow);
}
.uc_pagination .previous .arrow{
#include common_output(account__center_prev_page);
}
......
By the way, how to genterate sprite png with no radom charater?
for example ,i want sprite_common.png but not sprite_common-s2788fbf16e.png
This is in particular reference to the Compass spriting framework
Following the documentation here http://compass-style.org/help/tutorials/spriting/#magic-selectors
I have used this method so that this:
selectors/ten-by-ten.png
selectors/ten-by-ten_hover.png
.edit {
#include selectors-sprite(ten-by-ten);
}
generates:
.selectors-sprite, .edit {
background: url('/selectors-sedfef809e2.png') no-repeat;
}
.edit {
background-position: 0 0;
}
.edit:hover, .edit.ten-by-ten_hover, .edit.ten-by-ten-hover {
background-position: 0 -20px;
}
which is really great. However, I was wondering If/How in another instance I could include the "ten-by-ten.png" image from the sprite without including the magically attached hover state?
i.e.
I want this:
.view {
background: url('selectors/ten-by-ten.png') no-repeat;
}
Where hovering over this icon does not trigger the :hover state (ten-by-ten_hover.png).
But I was wondering if there was a way to achieve this still referencing the sprited image?
Thanks for any help/advice.
You can add sprites directly to an element using the #extend directive. The syntax is #extend .folder prefix - sprite name - state (ie, .selectors-sprite-name_hover):
.view {
#extend .selectors-ten-by-ten
}
&:hover {
#extend .selectors-ten-by-ten_hover
}
&:active {
#extend .selectors-ten-by-ten_active
}
.selectors-ten-by-ten_hover, .selectors-ten-by-ten_active, etc returned class not found errors for me in Compass.
This worked however:
.viewHover { #extend .selectors-ten-by-ten:hover; }
.viewActive { #extend .selectors-ten-by-ten:active; }