Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
How to use CSS variables with TailwindCSS ?
Next article icon

How to load window width value to SCSS variable ?

Last Updated : 02 Mar, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

The task is to load the window width value to an SCSS variable and use it. Let us take a brief introduction to an SCSS.

SCSS Variables can store any kind of value color, font-family, font-size, clip-path values, etc, and are mainly used to maintain the reusability of code across the stylesheets.

Approach:

  • Step 1: Define a function in SCSS and generate the precise viewport width values to acquire the window width 

    @function get-vw($target) {     $vw-context: (1000*.01) * 1px;    @return ($target/$vw-context) * 1vw;  }

  • Step 2: Pass in a value in pixels to this function and store it in an SCSS variable.

    $window-width: get-vw(72px);

    Since viewport-width is 1% of the viewport we can scale the size in px as a ratio.

    • Step 3: Use the variable wherever needed.

    main.scss 
    $window-width: get-vw(72px); /* Passing in a value in pixels */  /* Defining the function to generate the window width* / @function get-vw($target) {    $vw-context: (1000*.01) * 1px;   @return ($target/$vw-context) * 1vw; }  /* Setting the default values*/ *{   padding : 0;   margin : 0;   box-sizing: border-box; }  /* Using the property*/ .misc{   padding: 3rem 0;   color: #fff;   width: $window-width;   text-align: center;   font-size: 1.8rem;   background-color:green; }

    Output: This would result in the following CSS.

    main.css 
    /* Passing in a value in pixels */ /* Defining the function to generate the window width*/ /* Setting the default values*/ * {   padding: 0;   margin: 0;   box-sizing: border-box; }  /* Using the property */ .misc {   padding: 3rem 0;   color: #fff;   width: get-vw(72px);   text-align: center;   font-size: 1.8rem;   background-color: green; }

    Note: Here, mentioning box-sizing: border-box is really important here because this would render the DOM to remove any default margin or spaces.

    index.html 
    <!DOCTYPE html>     <html>      <body>         <div class="misc">            GeeksforGeeks         </div>      </body> </html>

    Output: Here, our text is taking up the whole width of its current screen.

    Note: Though there are javascript methods like window.outerWidth, we cannot possibly store those values in an SCSS variable since SCSS is just a pre-processor.


Next Article
How to use CSS variables with TailwindCSS ?
author
dikshapatro
Improve
Article Tags :
  • Web Technologies
  • CSS
  • SASS

Similar Reads

  • How to use CSS variables with TailwindCSS ?
    Tailwind CSS  allows users to predefined classes instead of using the pure CSS properties.  We have to install the Tailwind CSS.  Create the main CSS file (Global.css) which will look like the below code. Global.css: In the following code, the entire body is wrapped into a single selector. The entir
    1 min read
  • How to use Sass Variables with CSS3 Media Queries ?
    SASS Variables: SASS Variables are very simple to understand and use. SASS Variables assign a value to a name that begins with $ sign, and then just refer to that name instead of the value. Despite this, they are one of the most useful tools SASS provides. SASS Variables provide the following featur
    3 min read
  • How to Get Window Width and Height In React Native ?
    In this article, we'll explore two different approaches to obtaining the screen width and height in a React Native application. Scree­n dimensions, including width and height, play a vital role in de­signing user interfaces that adapt se­amlessly to different de­vices and orientations. By understand
    3 min read
  • BootStrap 5 Grid System Variable Width Content
    Grid system Variable width content means in a grid system we can add a setting where the column will adjust to the content inside it and occupy that space only. In this setting, we can add responsiveness by which we can specify the screen size above which that column will have variable width with co
    2 min read
  • p5.js width variable
    The width variable in p5.js is a system variable that stores the width of the drawing canvas. This value is automatically initialised by the first parameter of the createCanvas() function as soon as the code is executed. Syntax: width Parameters: This function does not accept any parameter. Below pr
    1 min read
  • HTML DOM Window visualViewport property
    The visualViewport property of the Window interface returns a VisualViewport object representing the visual viewport for the current window. This is a read-only property. Syntax: var visualViewport = Window.visualViewport; Return Value: A VisualViewport Object. Example: This example shows how to get
    2 min read
  • How to dynamically update SCSS variables using ReactJS?
    In React sometimes we might need to dynamically update the styling due to user interaction and change in the DOM. In the case of SCSS variables, we can dynamically update SCSS variables using ReactJS. Prerequisite:React JSNPM & Node.jsApproach:To dynamically update SCSS variables using React JS
    3 min read
  • How to Lock Window Resize C++ sfml?
    Multimedia components in computers can be easily interfaced using SFML (Simple and Fast Multimedia Library), a cross-platform library for software development. The software runs on Windows, Linux, Mac OS X, iOS, and Android operating systems. Video games and graphical programs can be developed quick
    2 min read
  • How to Use Sass with CSS?
    SASS (Syntactically Awesome Style Sheets) is a pre-processor for CSS that provides various features such as nesting and mixins. SASS compiles to regular CSS and that CSS is used in your project and finally by the browser to style the web page. How SASS Works?Let's understand how Sass works: The SASS
    3 min read
  • Cross-browser window resize event using JavaScript/jQuery
    The resize() method is an inbuilt method in jQuery that is used when the browser window changes its size. The resize() method triggers the resize event or attaches a function to run when a resize event occurs. jQuery has a built-in method for window resizing events. Syntax: $(selector).resize(functi
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences