SCSS Timeline CSS Code

li {
padding: 0 0;
position:relative;
clear:both;
display:inline-block;
width:100%;
@media(max-width: 860px) {
padding: 0 0;
}
&::after {
position: absolute;
left: 50%;
top: 8px;
content: ' ';
display: block;
width: ${attrs.LineThickness || '2'}px;
height: 100%;

background: ${attrs.LineColorTimeLine || '#e8e8e8'};
z-index: 5;
transform: translateX(-50%);
}
@media(max-width: 756px) {
&::after {
left: 1%;
transform: translateX(-0%);
}
}
}
}

.direction-l {
position: relative;
width: 580px;
float: left;
text-align: right;
padding-right:30px;
@media(max-width: 756px) {
float: none;
width: 100%;
text-align: left;
padding-left:30px;
padding-right:0px;
}

.time-wrapper {
float: left;
@media(max-width: 756px) {
float: none;
}
}
}

.direction-r {
position: relative;
width: 580px;
float: right;
padding-left:30px;
@media(max-width: 756px) {
float: none;
width: 100%;
text-align: left;
}

&:after {

&:before {
left: -40px;
}
}
.time-wrapper {
float: right;
@media(max-width: 756px) {
float: none;
}
}
}

.flag-wrapper {
position: relative;
display: inline-block;
text-align: center;
@media(max-width: 860px) {
text-align: center;
}
.flag {

display: inline;
padding: 6px 0px;

font-weight: 600;
text-align: left;
@media(max-width: 756px) {

z-index: 15;
}
}
}

@media(max-width: 756px) {
.direction-l:before
{
left: -8px
}
}
.timeline li:before {
position: absolute;
top: 0%;
left: 50%;
content: ' ';
display: block;
width: ${attrs.PointRadius || '12'}px;
height: ${attrs.PointRadius || '12'}px;

background: ${attrs.PointColor || "#fff" };
border-radius: ${attrs.PointRadius || '10'}px;

z-index: 10;
transform: translateX(-50%);

}
@media(max-width: 756px) {
.timeline li:before
{
top: 0px;
left: 0%;
transform: translateX(-0%);
}
}
.direction-r .desc {
text-align:left;
}
.direction-l .desc {
text-align:right;
}

@media(max-width: 756px) {

.direction-l .desc {
text-align:left;
}
}

.desc {

font-size: 0.91em;
line-height: 1.5em;
a {
color: $link-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}

}
.postdropdown li
{
list-style:none;
}
.components-button.is-small {
height: 24px;
line-height: 22px;
padding: 0 8px;
font-size: 24px;
}

what is name of above css format

### Key Features in Your SCSS Code:
1. **Nesting:** You can nest selectors inside one another, which makes the hierarchy of styles clearer and more maintainable.
2. **Variables:** The use of `${attrs.LineThickness}`, `${attrs.LineColorTimeLine}`, `${attrs.PointRadius}`, and `${attrs.PointColor}` indicates the use of variables.
3. **Media Queries:** Media queries are included within selectors for responsive design, enhancing readability.

If you're not already using a preprocessor, you'll need to compile this SCSS into standard CSS for it to work in the browser.

1. **Nesting:** In CSS, each selector must be defined separately. For example, this nested structure:

.timeline {
     li {
       padding: 0;
     }
   }

would need to be written as:

.timeline li {
     padding: 0;
   }

2. **Variables:** The `${attrs.LineThickness}`, `${attrs.LineColorTimeLine}`, and other variables are specific to SCSS and will not work in plain CSS. You would need to replace them with actual values.

3. **Ampersand (`&`) Selector:** The `&` character is used in SCSS to refer to the parent selector. This needs to be rewritten in standard CSS.

4. **Interpolation:** The use of `${}` for variable interpolation is not valid in CSS.

### How to Convert SCSS to CSS
To use the provided SCSS in a `.css` file, you will need to:
1. **Compile the SCSS** into CSS using a preprocessor like Sass or a build tool like Webpack, Gulp, or Grunt.
2. **Manually rewrite** the SCSS code in valid CSS if you want to avoid using a preprocessor.

### Example Conversion
Here’s how part of your SCSS would look when converted to CSS:

**SCSS:**

.timeline {
  li {
    padding: 0;
  }
}

**Converted to CSS:**

.timeline li {
  padding: 0;
}

### Conclusion
If you want to use SCSS features, you should keep your styles in a `.scss` file and use a compiler. If you want to write in pure CSS, you’ll need to manually convert the SCSS syntax to valid CSS syntax.

Fatal error: Allowed memory size of 1149239296 bytes exhausted (tried to allocate 262144 bytes) in /html/wp-includes/class-wp-fatal-error-handler.php on line 37
in worpress

### Here are steps you can take to resolve this issue:

1. **Increase PHP Memory Limit:**
You can increase the memory limit by modifying the `wp-config.php` file. Open the file and add the following line just above the line that says `/* That's all, stop editing! Happy blogging. */`:

define('WP_MEMORY_LIMIT', '256M');

You can increase this value to `512M` or even `1G` if needed, but it's essential to ensure your server can support this increase.

2. **Edit php.ini File:**
If you have access to your server's `php.ini` file, you can increase the memory limit there. Look for the line that specifies `memory_limit` and change it:

memory_limit = 256M

or

memory_limit = 512M

After making this change, restart your web server if possible.

3. **.htaccess File:**
If you cannot access the `php.ini` file, you can try adding the following line to your `.htaccess` file in the root directory of your WordPress installation:

php_value memory_limit 256M

Again, you can increase the value as necessary.

4. **Disable Plugins:**
Sometimes, a specific plugin may be consuming excessive memory. You can try disabling all plugins to see if the problem persists. If the site loads correctly, re-enable the plugins one by one to identify the culprit.

5. **Switch to a Default Theme:**
If disabling plugins doesn’t help, switch to a default theme like Twenty Twenty-Three to rule out any theme-related issues.

6. **Check for Memory Leaks:**
If you consistently run out of memory, it may be due to a poorly coded plugin or theme. Consider reviewing the code for any custom functionalities or checking for known issues with the plugins you are using.

7. **Optimize Database:**
A bloated database can also lead to memory issues. Use plugins like **WP-Optimize** or **WP-Sweep** to clean up your database and optimize its performance.

8. **Contact Your Hosting Provider:**
If you’re on shared hosting and unable to change the memory limit, contact your hosting provider to see if they can increase it for you.

### Monitoring Memory Usage
You can install plugins like **Query Monitor** or **Debug Bar** to monitor memory usage and see which components are using the most memory, helping you identify potential issues.

### Conclusion
After making these changes, monitor your website to ensure the issue is resolved. If the problem persists despite increasing memory limits and optimizing your site, further investigation may be necessary to identify any underlying issues.

### Troubleshooting Steps

1. **Check Style Dependencies:**
Ensure that `uncode-custom-style` is a valid handle for a registered style. If this handle does not exist or is incorrectly referenced, it might cause issues. You can check the registered styles in your theme or parent theme's `functions.php` file. If you're unsure, you can try removing the dependency temporarily:

wp_enqueue_style('child-new-style', get_stylesheet_directory_uri() . '/style-new.css', array(), time());

2. **Avoid Duplicate Handles:**
In your enqueue call, you have the same handle `'child-new-style'` listed twice in the dependencies array. Change it to avoid redundancy:

wp_enqueue_style('child-new-style', get_stylesheet_directory_uri() . '/style-new.css', array('uncode-custom-style'), time());

3. **Review the CSS File:**
Ensure that the `style-new.css` file does not contain any syntax errors or large amounts of data that could consume memory. If the file is large, consider breaking it down into smaller parts.

4. **Increase PHP Memory Limit:**
Since you mentioned memory exhaustion, ensure that you have successfully increased the PHP memory limit using one of the methods described previously. Confirm that the limit has been applied correctly by checking the `phpinfo()` output.

5. **Debugging:**
Enable debugging in WordPress to see if there are any specific error messages that provide more information. You can enable debugging by adding the following lines to your `wp-config.php` file:

define('WP_DEBUG', true);
   define('WP_DEBUG_LOG', true);
   define('WP_DEBUG_DISPLAY', false);

After enabling this, check the `wp-content/debug.log` file for any specific errors related to your CSS or stylesheets.

6. **Check Server Resources:**
If you're on shared hosting, check if your hosting provider is experiencing issues with resources. Sometimes, server-level problems can cause memory exhaustion.

7. **Disable Other Plugins:**
Temporarily disable other plugins to check if any are conflicting with your styles or causing memory issues.

### Example of Correct Enqueue Code

Here’s a simplified example of how to properly enqueue a style in your child theme's `functions.php` file:

function my_theme_enqueue_styles() {
    // Enqueue parent theme stylesheet
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

    // Enqueue child theme stylesheet
    wp_enqueue_style('child-new-style', get_stylesheet_directory_uri() . '/style-new.css', array('parent-style'), time());
}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

### Conclusion
After making these adjustments, clear your browser and site cache, then reload your website. If the issue persists, consider providing more details about the error messages you see in the debug log or any other symptoms that may help diagnose the problem further.