This question already has answers here:
SASS/SCSS: Refer to property without using an intermediate variable
(2 answers)
Closed 7 years ago.
Following is the snippet in SCSS:
.element-a {
position: absolute;
right: 0;
width: 216px;
height: 232px;
#media (max-width: 1000px) {
right: 0; // Half of 0
width: 118px; // Half of 216 px
height: 116px; // Half of 232 px
}
}
.element-b {
position: absolute;
width: 140px;
height: 152px;
right: 216px + 10px;
#media (max-width: 1000px) {
width: 70px; // Half of 140px
height: 76px; // Half of 152px
right: 113px; // Half of 226px
}
}
As can be seen, if the media-query max-width:1000px is satisfied. The attributes right, width and height should be half of its original values. However, it looks not good practice to hardcode the value by calculating it manually..
Is there a better way to write this in SASS/SCSS? Or is there a way to refer the value in outer scope?
Use variables, here's an example:
$b-width: 140px;
.element-b {
width: $b-width;
#media (max-width: 1000px) {
width: $b-width/2 // Half of $b-width
}
}
Related
This question already has answers here:
Responsively change div size keeping aspect ratio [duplicate]
(5 answers)
Closed 7 years ago.
I want to set child item height in various screen size as dynamically using sass function instead of writing manually. I know we can use css position: absolute; property or simply use jQuery code to get the result, but I want to achieve child item value using with sass function.
**We can give width as percentage value, but height can't result without giving position: absolute; when giving percentage value.
Check my pen : http://codepen.io/nikhil8krishnan/pen/adqbeR?editors=1000
Check below codes , Here I'm writing item value manually on each screen size.
Outputs
.container {
background-color: red;
margin: auto;
text-align: center;
color: #fff;
font-size: 0;
}
.child {
display: inline-block;
border-right: solid 1px #fff;
background-color: green;
}
/* container width and child width & height is set by manually on each screen size*/
/*max to 767px*/
.container {
width: 100%;
}
.child {
width: 25%;
height: 25%;
}
#media (min-width: 768px) {
.container {
width: 600px;
}
.child {
height: 150px;
width: 150px;
}
}
#media (min-width: 980px) {
.container {
width: 800px;
}
.child {
height: 200px;
width: 200px;
}
}
#media (min-width: 1200px) {
.container {
width: 1000px;
}
.child {
height: 250px;
width: 250px;
}
}
How can I write those codes with sass functions? Is it possible please share thoughts.
To automate the export of media queries you could use the following function
$viewports: ( 100%, 600px, 800px, 1000px);
#each $viewport in $viewports {
#media (min-width: #{$viewport}) {
.container {
width: $viewport;
}
.child {
height: $viewport/4;
width: $viewport/4;
}
}
}
An example: http://www.sassmeister.com/gist/e87c4121d584776355cd
This question already has an answer here:
Sass won't compile because of an "invisible" error
(1 answer)
Closed 7 years ago.
When writing the below under just as is, one in-between width media call on top of another in SASS I get a compilation error - error says 'Invalid CSS after "TCY": expected selector, was "#media <max-wid..."> - I don't understand what this means and have used the below in the past; I don't see anything wrong below, any advice?
#media (max-width:950px) and (min-width:800px) {
.clickFacet {
width: 93%;
position: absolute;
left: 0;
top: 40px;
max-width: 600px;
border: 1px solid red;
}
}
#media (max-width:1200px) and (min-width:1000px) {
.clickFacet {
width: 100%;
position: absolute;
left: -1%;
top: 40px;
max-width: 600px;
border: 1px solid red;
}
}
Note: // one will work perfect; if I comment out either one -- they are read, for some reason two isn't liked?
The error points me to the start of the second #media which ever is below.
Code before per request:
body{
font-size: 18px;
}
I got an error when inserting it into a text editor, it seems that your closing bracket on your first media query was not right, maybe copied code. Anyways, copy, paste this into your css and it should solve the problem.
#media (max-width:950px) and (min-width:800px) {
.clickFacet {
width: 93%;
position: absolute;
left: 0;
top: 40px;
max-width: 600px;
border: 1px solid red;
}
}
So my layout looks like this:
Left bar, width: 200px; left: 0;
Center, width: 700px; left: 250px;
Right, width: 200px; right: 10px;
This works, but for bigger screen sizes, I want Center to be, well, centered. Regardless of size, though, I always want at least left: 250px
How can I achieve this?
You can use CSS media queries to achieve this:
#media screen and(min-width: 1001px){
.center{
margin: auto;
}
}
#media screen and(max-width: 1000px){
.center{
left: 250px;
}
}
CSS Media Queries as Marcel presented are probably the best solution. For future reference, generally responsive web development demands the use of %'s rather than pixels to adjust to screen size variance.
approximately -->
Left { width: 17%; left: 0; min-width: 250px; /*margin-right: 50px;*/ }
Center { width: 65%; left: 20%; position: absolute; }
Right { width: 17%; right: 10px; }
That's my basic style
#logo {
position: absolute;
background: url('imgs/logo.png');
width: 739px;
height: 195px;
margin: -291px 0 0 133px;
z-index: 5;
pointer-events: none;
}
And I want to change the margin-left to something else based on the media. For example width 100px but it doesn't work.
#media (min-width: 1440px) {
.bc {
padding: 0;
margin: 0 auto;
width: 1150px;
}
.content_table {
width: 1150px;
}
#logo {
position: absolute;
background: url('imgs/logo.png');
width: 739px;
height: 195px;
margin: -291px 0 0 233px;
z-index: 5;
pointer-events: none;
}
}
Out of your comment the first rule (the one with the margin 133px) is after the rule in the #media block.
As both have the same selector for the rule only the order in the css file matters.
Thats why the last rule (the one with the 133px) always overwrites the one in the #media block.
You should place all rules that are not in a #media block at the beginning of your css file and add the #media blocks after those rules.
#media screen and (min-width: 1440px) {
#logo {
}
}
min-width: 1440px is a lot. are you sure you are not trying to check max-width?
I have one button that I must position absolute in accordance with what I'm doing. This is fine; except at 1600px resolution - the button goes out of the screen; I want to utilize media queries to fix this, but my first two efforts are not working and moving the element at the specified viewport and I'm not sure.. why.
Attempt # 1:
#media screen and (min-width:1600px) { /* large resolution */
#menu_tog { margin-left: 337px; }
}
Attempt # 2:
#media (max-width:1600px;) and (min-width:1300px;) { /* large resolution */
#menu_tog { margin-left: 337px;}
}
Original (expect position change at 1600)
#menu_tog {
cursor: pointer;
margin-left: 138px;
margin-top: 230px;
max-height: 35px;
max-width: 50px;
position: absolute;
z-index: 999;
}
Make sure you're using top and left with absolutely-positioned elements, not margins. From there, a simple media query should do the job:
#menu_tog {
position: absolute;
cursor: pointer;
margin: 0;
left: 138px;
top: 230px;
max-height: 35px;
max-width: 50px;
z-index: 999;
}
#media (min-width: 1600px) {
#menu_tog {
left: 337px; /* adjust as necessary */
}
}