For example in the following from sass. Is the = just a shorthand for #mixin? I can't seem to find any info for this on google
=multi-line-button($base-color)
+background-clip('padding-box')
border-width: 1px
+border-radius(6px)
border-style: solid
color: white
display: block
margin: 0.2em auto
padding: 12px 15px
text-align: center
text-decoration: none
yes, this is the way to define mixins in Sass
dunno if this article will help at all
EDIT:
The following are identical
#mixin red-text
color: #ff0000
=red-text
color: #ff0000
Just add +red-text to your selectors
"#mixin foobar" is the newer SCSS syntax (more CSS-like) and "=foobar" is the older SASS syntax (more HAML-like). I'm fairly new to SASS and started with SCSS, but both are supported (probably not in the same stylesheet) and both will continue to be supported.
Related
I was looking for a grunt tool to parse my css and tell me when I can convert longhand css properties to shorthand. My way of thinking that this makes css smaller, easier to understand.
So basically if it will find
.mydiv{
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
}
It would change it to:
.mydiv{
background: #000 url(images/bg.gif) no-repeat top right;
font: italic bold .8em/1.2 Arial, sans-serif;
}
To my surprise I was not able to find such plugin, but on the other side I found a lot of them which convert shorthand properties to longhand. This raised a question:
why do people want to convert their nice and clean shorthand equivalents to longhand? is there any valid reason except:
I like it to be longer
some really outdated browser like IE 7 screws up something. (by outdated I mean IE <=7, chrome, ff, safari 2 versions lower then current)
P.S. also I am not asking for a grunt plugin, if someone knows one, please let me know.
P.P.S I saw this question and the person is concerned with: performance and documentation. I do not care about these things because: people in my team can read and understand shorthand and prefer it, and I know that performancewise (for parsing rules) it makes really tiny difference (if any) and it is smaller in case of bandwidth.
What I am concerned is that may be I will get different representations in some browsers.
Sometimes is necessary, so you can exercise finer control over your styles so that you can create things outside the typical case.
Consider this example of long hand border syntax:
section{
max-width: 60em;
margin: 0 auto;
}
p {
border-color: black;
border-style: solid;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
}
This creates a very different border then usual. There is no way to accomplish is such a terse way with short hand alone.
Demo: http://codepen.io/agconti/pen/sixaL
This question already has an answer here:
Compass filter out -moz vendor prefix
(1 answer)
Closed 6 years ago.
I'm working on an AngularJS project using the AngularJS generator for Yeoman.
I installed Compass as a gem because I couldn't find/figure out an appropriate compass bower package.
Various compass mixins I'm using work fine; expect the linear-gradient one; it seems to only pass-through my content and not modify it with vendor-specific prefixes:
SASS:
#import "compass";
.container {
width: 100%;
height: 100%;
border: .2em solid #fff;
#include border-radius(.5em);
#include background-image(linear-gradient(top, #000, #fff));
}
CSS:
.container {
width: 100%;
height: 100%;
border: .2em solid #fff;
-o-border-radius: 0.5em;
border-radius: 0.5em;
background-image: linear-gradient(top, #000000, #ffffff);
}
As you can see, linear-gradient is being passed-through without any vendor prefixes (but border radius is getting an Opera one) and thus won't work in Chrome. I've checked and rechecked and this is exactly how the Compass documentation explains it.
What am I doing wrong?
bootstrap-sass-official#3.1.1+2
compass (0.12.6, 0.12.4, 0.12.3)
compass-core (1.0.0.alpha.19)
compass-import-once (1.0.4)
compass-normalize (1.5)
Thanks
I figured it out; I saw a a lot of similar problems on here and initially none of them addressed "my" issue.
It's apparently because autoprefixer (which is bundled/enabled by default with the angular generator) was stripping out prefixes.
The default setting for it in gruntfile.js is "last 1 version". This breaks it for Safari and Chrome (and as far as I know, I'm running the latest).
Setting it to "last 2 versions" fixed it for me.
More at: https://github.com/ai/autoprefixer#browsers
I've a Joomla3 website with a custom template looking fine in most browsers but awful in IE8. Lots of the elements just don't seem to be picking up background colours and are just white.
For instance the footer normally has a background colour. When I look at the template.css file (compiled from bootstrap and my custom template.less file) you can see the footer formatting
.footer .container {
padding: 5px;
border: 3px solid #bbbbbb;
padding-top: 0px;
border-top: 0px;
-webkit-border-radius: 0px 0px 4px 4px;
-moz-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
background-color: rgba(245,248,250,0.7);
}
But when I use the website development tools of ie8 (via wine on my mac - in case that makes a difference) to examine why it is just white in ie8, I see
which seems to show that the background-color of .footer .container is just being ignored.
Why would this be? Is this because it's compiled into a rgba format by the less compiler?
Many thanks for any help on this and how I might solve it.
CSS3 colors, such as rgba() are not supported by IE8, that's why it's not working.
You will have to take an alternative approach for specifying the background-color if you want support in IE8. If you don't mind losing the transparency, just use background-color:rgb(245,248,250); or.. background-color: #F5F8FA;
See http://caniuse.com/css3-colors
What you can do is import css3.js in your website. This javascript files allows you to use CSS3 attributes that will work on older browser that wouldn't usually support it.
http://imsky.github.io/cssFx/
Once you've imported that, you can use the following as you were before:
background-color: rgba(245,248,250,0.7);
Just to be on the safe side, I think it's always good practice to have a fallback, just incase, like so:
background-color: #F5F8FA;
background-color: rgba(245,248,250,0.7);
Note that the fallback comes before rgba()
Hope this helps
I encountered this same issue when using IE11 in enterprise mode.
I had this style set:
.heading {
background-color:#f1f1ef;
border-style:solid;
border-color:#E4E3DD;
border-width:1px;
}
and my table heading did not have the background color:
<th class="heading">Test</th>
I had to manually set a property bgcolor for this to work in Enterprise mode:
<th class="heading" bgcolor="#f1f1ef">Test</th>
I'm developing a Grails app and I need to modify some elements' style. I tried to add a css class to the main.css file but it is not working.
In /web-app/css/main.css:
.artistItem {
background-color: #444;
border: 1px solid #fff;
padding: 10px;
color: #ccc;
width: 200px;
}
In the .gsp:
<div class="artistItem">Some text</div>
But the div remains unchanged. Am I missing something?
Thanks!
This isn't a direct answer
Playing around with CSS in grails can be a little frustrating for someone that hasn't had a lot of exposure to CSS in general (I'm speaking form experience). Grails provides a nice clean CSS for a good starting point but trying to build on it without understanding CSS can cause some pain.
I would recommend looking at a couple tools like FireBug for firefox or Chrome's built in developer tools, IE also has a nice developer tool. These tools allow you to see how the browser is rendering your page and what CSS elements are being used or not used. They also expose the javascript console and several other nice debugging tools. I believe this are essential tools to help understand what the browser is doing.
I hope this helps!
Try:
.artistItem {
background-color: #444 !important;
border: 1px solid #fff !important;
padding: 10px !important;
color: #ccc !important;
width: 200px !important;
}
If that works, then you know there is another css stylesheet overriding it. If not the css is not being included properly.
I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/
In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.
I have tried out all the things but I am not able to figure out the actual problem.
I see a lot of unneccesary styling. In essence, this is what you want:
Basic form without floats
You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.
Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.
Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.
Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try
.regbutton, .regbutton:visited {
background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
/*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
/*-webkit-border-radius: 6px;*/
/*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
/*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
/*border-bottom: 1px solid rgba(0,0,0,0.25);*/
position: relative;
cursor: pointer;
}
try to set border:none for your buttons